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>