Vue 跳转到新的标签页在新的窗口打开页面可传参

保持好运

已于 2023-05-12 13:57:38 修改

阅读量1w

点赞数 6

分类专栏： Vue 文章标签：前端 vue.js 前端框架

于 2022-08-01 21:49:56 首次发布

本文链接：https://blog.csdn.net/weixin_49098968/article/details/126110669

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现跳转到新的标签页通常通过在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>

如果有帮助请记得一键三联哦