Vue Router 中实现在新窗口打开页面

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');
}