首页vue3 新窗口导航

vue3 新窗口导航

时间: 2025-01-31 07:09:15 浏览: 39

### Vue3 中实现新窗口打开路由链接在 Vue Router 的上下文中，可以通过多种方式实现在新窗口中打开特定的路由链接。对于 `<router-link>` 组件而言，可以直接利用其属性 `target` 来设置 `_blank` 从而让点击后的链接在一个新的浏览器标签页中打开。 #### 使用 `<router-link>` 通过设置 `target="_blank"` 属性以及绑定动态路径参数至 `to` 属性可以轻松达成目标： ```html <router-link target="_blank" :to="{ path: '/catalog', query: { id: '1' } }">打开新的标签页</router-link> ``` 这种方式适用于希望保持 URL 参数一致性的场景，并且能够很好地兼容不同版本的 vue-router[^1]。 #### 编程式导航除了模板内的声明式方法外，在 JavaScript 中也可以编程地触发相同的行为。这通常用于逻辑较为复杂的业务需求下，比如基于某些条件判断决定是否新开页面等。 ```javascript this.$router.resolve({ name: "Catalog", params: { id: "1" } }).href; window.open(this.$router.resolve({name:"Catalog",params:{id:"1"}}).href,'_blank'); ``` 此代码片段展示了如何解析一个给定的位置并返回相应的完整 URL 地址字符串，之后借助原生 JS 方法 `window.open()` 执行实际的新窗口/标签页开启操作。

阅读全文