vue 跳转新窗口的方法

佩淇呢2024-07-03 18:17

1.使用router-link

javascript 复制代码

<router-link :to="{ name: 'pageA', params: { id: Id}}" tag="a" target="_blank">新页面</router-link>

to 指的要跳转的路由以及参数，params指的参数需要在URL中隐藏；如果需要显示在URL中，则使用 query。
tag="a" 指定渲染为 <a> 标签。<router-link> 默认并不直接支持 target="_blank" 属性，将其渲染为原生的a标签
target="_blank" 打开新链接，必须添加tag="a" 才有作用

2.使用$router.resolve

适用于@绑定了点击事件需要跳转的场景

javascript 复制代码

<button @click="openNewPage(e)">打开新页面</button>

javascript 复制代码

methods: {
  openNewPage(e) {
    const routeUrl = this.$router.resolve({ name: 'pageA', params: { id: e } });
    window.open(routeUrl.href, '_blank');
  }
}

3.window.open

适用于有新的完整的链接跳转，将新链接的url放入open中即可

javascript 复制代码

window.open('https://www.example.com');

参考博客：vue router-link 跳转打开新标签页面_ant design vue router-link打开新的标签页并传参-CSDN博客