vue-router如何以新窗口标签形式打开

Robert_c

于 2021-08-07 14:13:32 发布

阅读量970

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45736502/article/details/119485550

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

"本文介绍了在Vue2应用中，如何通过`<router-link>`组件和`router.resolve`方法来实现链接在新窗口中打开。示例代码展示了在`<router-link>`上添加`target="_blank"`属性以及使用`window.open`结合`router.resolve`的方法，详细解释了两种方式的用法，帮助开发者理解如何处理路由跳转并打开新窗口。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<router-link>实现：

vue2版本的 <router-link> 可以在里面添加一个target="_blank" 属性如下所示，这样就能实现以新的标签页面打开该页面

<router-link target="_blank" :to="{path:'/demo',query:{value1:'1',value2:'2'}}">open</router-link>

使用router.resolve实现

我们可以使用window.open结合router.resolve来实现这个效果

<script>
    export default{
        name:'demo',
        data(){return{}},
        methods:{
            toNewWindow(){
                //编写要跳转的页面路径，该路径在router文件夹中的index.js里面声明
                let url = this.$router.resolve({
                      path: "/demoWindow",
                      query: {value1:'1',value2:'2'}
                 });
                this.window.open(url .href, '_blank');
            }
        }
    }
</script>