vue：新窗口打开页面

### Vue3 中实现点击后在新窗口打开指定路由页面 为了实现在 Vue3 项目中点击按钮后，在新窗口中打开指定路由页面的功能，推荐使用 `$router.resolve` 方法。此方法返回一个包含 `href` 属性的对象，该属性包含了完整的 URL 地址，可以直接用于 `window.open()` 函数。 下面是一个具体的例子： ```javascript // 假设这是在一个组件的方法内定义的函数 const openInNewTab = (params) => { // 使用 resolve 解析目标路径并带上查询参数 const routeData = this.$router.resolve({ name: "targetRouteName", query: params, params: { catId: params.catId } }); // 利用解析后的 href 创建一个新的浏览器标签页 window.open(routeData.href, '_blank'); }; ``` 上述代码片段展示了如何创建一个名为 `openInNewTab` 的函数[^1]，它接收参数并通过编程方式构建通往另一页面的新链接，最终利用 JavaScript 的内置功能开启新的浏览上下文。 对于模板中的 HTML 部分，则可以通过绑定事件处理器来调用这个逻辑: ```html <button @click="() => openInNewTab({ key: value })">Open New Window</button> ``` 此外，如果希望简化操作而不需要额外编写 JavaScript 代码的话，也可以直接采用 `<router-link>` 组件配合其原生属性完成相同效果： ```html <router-link target="_blank" :to="{ name: 'targetRouteName', query: {key: value}, params: {catId:value}}">前往新页面</router-link> ``` 这种方法不仅简洁明了，而且完全遵循 Vue Router 提供的最佳实践指南[^2]。 #### 注意事项 当处理跨域请求或涉及敏感信息传递时需格外小心；另外需要注意的是，某些现代浏览器可能会阻止自动弹出窗口的行为，除非是在用户的交互动作之后立即触发。