vue router-link 跳转 打开新标签页面

在 Vue 中，使用 vue-router 进行页面跳转时，若希望使用 <router-link> 组件来打开一个新标签页，需要注意的是，<router-link> 默认并不直接支持 target="_blank" 属性。但是，你可以通过将 <router-link> 渲染为原生的 <a> 标签并添加 target="_blank" 来实现这一需求。

下面是一个示例代码：

<router-link :to="{ name: 'detail', params: { id: yourId }}" tag="a" target="_blank">打开新页面</router-link>

在这个例子中：

• :to="{ name: 'detail', params: { id: yourId }}" 定义了跳转的目标路由及其传递的参数。注意，使用 name 而非 path 是为了利用路由的命名配置，并且如果参数需要在URL中隐藏，应使用 params；如果需要显示在URL中，则使用 query。
• tag="a" 指定渲染为 <a> 标签。
• target="_blank" 确保链接在新标签页中打开。

如果你不介意使用 JavaScript 方法来实现新窗口打开，也可以使用 $router.resolve() 方法配合 window.open()，如下所示：

methods: {
  openInNewTab(e) {
    const routeUrl = this.$router.resolve({ name: 'detail', params: { id: e } });
    window.open(routeUrl.href, '_blank');
  }
}

然后在模板中绑定这个方法到按钮或其他可交互元素上：

<button @click="openInNewTab(yourId)">在新标签页打开详情</button>

这样，当用户点击按钮时，就会在新标签页中打开指定的路由页面。