vue3路由跳转并打开新的标签页

实现 Vue3 中路由跳转并在新标签页中打开
在 Vue3 中，为了实现在新标签页中打开链接的功能，$router.push() 或 $router.go() 并不适用因为这些方法仅限于在同一浏览器窗口内操作。对于希望在新的浏览器标签或窗口中加载目标路径的情况，应当采用 router.resolve() 方法来获取 URL 地址并利用 JavaScript 的原生方式去创建一个新的浏览上下文。
下面是一个具体的例子展示如何使用 router.resolve() 来获得地址信息，并通过 window.open() 函数在一个新的标签页中打开指定的路由：
// 假设这是组件内的某个方法
function openInNewTab(path) {
const route = this.$router.resolve({ path });

window.open(route.href, '_blank');
}
登录后复制
此代码片段展示了当调用 openInNewTab('/about') 时，将会解析 /about 路径对应的完整 URL，并且会在新的浏览器标签里打开该页面[^2]。
另外，在模板中如果想要直接使用 <a> 标签配合 v-bind:href 属性以及设置 _target="_blank" 来达到同样的效果也是可行的选择之一:
<a :href="$router.resolve({ name: 'user', params: { userId }}).href" target="_blank">
用户详情
</a>
登录后复制
这段 HTML 片段会根据给定的名字和参数构建出正确的 URL 链接，并确保点击后能在新的标签页显示用户详情页面的内容[^1]。