SvelteKit中如何通过goto函数在新标签页打开页面？

要实现Ctrl（Windows/Linux）或Cmd（Mac）点击时在新标签页打开页面，你需要修改点击事件处理逻辑，通过判断鼠标事件的按键状态来分情况处理导航行为：

1. 修改点击处理函数，接收鼠标事件对象和ID参数，根据按键状态选择导航方式：

clickHandler: (event: MouseEvent, id: string) => {
  const targetUrl = `/app/profile/${id}/settings/general-info`;
  
  // 检测是否按下Ctrl或Cmd键
  if (event.ctrlKey || event.metaKey) {
    // 在新标签页打开链接
    window.open(targetUrl, '_blank');
  } else {
    // 原有当前页面导航逻辑
    goto(targetUrl);
  }
}

2. 在div的点击事件绑定中，传递鼠标事件和目标ID：

<div on:click={(e) => clickHandler(e, yourIdVariable)}>点击进行导航</div>

关键说明 #

• event.ctrlKey 和 event.metaKey 分别对应不同系统的快捷键，同时判断可兼顾Windows/Linux和Mac用户
• 使用原生的window.open()打开新标签页，与SvelteKit的路由系统兼容，相对路径会被正确解析
• 必须在点击事件中传递鼠标事件对象，才能获取到按键的按下状态

内容的提问来源于stack exchange，提问作者Vincent Karani