Vue单页面实现跳转到新的标签页

实现跳转到新的标签页通常通过在a标签中添加target="_blank" 属性

在Vue项目中跳转到新页面可利用以下两种方法实现。

1、自定义组件router-link
在router-link里添加 target="_blank"

<router-link :to="{ name: '/new_page', params: { userId: '123' }}" target="_blank" >
       跳转到新的标签页
</router-link>

2、window.open()方法实现
this.$router.resolve +  window.open 实现。
window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口,即page.href.

 <template>
    <div @click="toPage(e)">跳转到新的标签页</div>
 </template>

<script>
    export default {
        methods:{
            toPage(e){
                let page = this.$router.resolve({
                    name:'url',
                    query: {id: id, e:0}
                })
                window.open(page.href, '_blank');
            }
        }
    }
</script>