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

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

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