vue3跳转路由新增页面

### Vue 3 中实现路由跳转并添加新页面

在 Vue 3 应用程序中，为了实现在点击链接或按钮时新开页面加载指定路径的内容，可以采用 `vue-router` 提供的功能来完成这一需求。对于希望触发新的浏览器标签页的行为，官方推荐的方式是利用 `$router.resolve()` 方法配合原生 JavaScript 的 `window.open()` 函数。

#### 使用 `$router.resolve()`

当需要创建一个新的浏览记录条目并且在同一应用实例内导航到不同的视图而不需要刷新整个页面时，通常会使用 `$router.push()` 或者其他类似的 API 来改变当前的历史状态。然而，在想要打开一个全新的窗口/选项卡的情况下，则应该考虑调用 `$router.resolve()` 获取目标位置的信息对象，并从中提取 URL 地址传递给 `window.open()`[^2]。

以下是具体的代码示例：

// 假设已经配置好了 vue-router 并注入到了组件之中
methods: {
    openNewPage(path) {
        const routeData = this.$router.resolve({ path });
        window.open(routeData.href, '_blank');
    }
}

在这个例子中，定义了一个名为 `openNewPage` 的方法接受参数 `path` 表示要访问的目标地址。内部先通过 `this.$router.resolve()` 将传入的路径解析成完整的 URL 字符串形式存储于变量 `routeData.href` 下面；接着再把这个字符串作为第一个参数提供给 `window.open()` 函数用于指示新窗口应显示的具体网页资源所在的位置。第二个参数 `_blank` 则确保该操作会在空白处启动而不是覆盖现有界面。

另外需要注意的是，如果项目尚未集成 `vue-router` 插件的话，还需要按照文档说明先行安装它以便后续能够正常使用其提供的功能特性[^1]。