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