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

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

时间: 2025-01-03 22:28:57 浏览: 209

### 实现 Vue3 中路由跳转并在新标签页中打开在 Vue3 中，为了实现在新标签页中打开链接的功能，`$router.push()` 或 `$router.go()` 并不适用因为这些方法仅限于在同一浏览器窗口内操作。对于希望在新的浏览器标签或窗口中加载目标路径的情况，应当采用 `router.resolve()` 方法来获取 URL 地址并利用 JavaScript 的原生方式去创建一个新的浏览上下文。下面是一个具体的例子展示如何使用 `router.resolve()` 来获得地址信息，并通过 `window.open()` 函数在一个新的标签页中打开指定的路由： ```javascript // 假设这是组件内的某个方法 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"` 来达到同样的效果也是可行的选择之一: ```html <a :href="$router.resolve({ name: 'user', params: { userId }}).href" target="_blank"> 用户详情 </a> ``` 这段 HTML 片段会根据给定的名字和参数构建出正确的 URL 链接，并确保点击后能在新的标签页显示用户详情页面的内容[^1]。

阅读全文