Vue Router 中实如今新窗口打开页面

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

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.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');
}
复制代码