1. < router-link > 标签实现新窗口打开
    官方文档中说 v-link 指令被 < router-link > 组件指令替代,且 < router-link > 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用< a >标签,但事实上vue2版本的 < router-link > 是支持 target="_blank" 属性的 (tag="a")。

<router-link target="_blank" :to="{path:'/about',query:{id:deviceId}}">关于</router-link>

<script>
export default {
  data(){
    return{
      deviceId:'123456'
    }
  }
}
</script>

2. 编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助 router 的示例方法,通过编写代码实现。我们常用的是 router.push和router.push 和router.push和 router.go 但是 vue2.0 以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve。

<button @click="gotest1">按钮</button>

gotest1(){
   let deviceId = '56789'
   let routeData = this.$router.resolve({
      query: {id:deviceId},
      path:'/test1'
   });
   window.open(routeData.href, '_blank');
}
最后修改:2023 年 06 月 05 日
如果觉得我的文章对你有用,请随意赞赏