在vue项目中如何实现跳转到一个新页面

转载于 2021-06-02 22:12:27 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/yjiangling/p/13640043.html

文章标签：

#vue

项目遇到的问题专栏收录该内容

61 篇文章

订阅专栏

博客介绍了Vue中实现新窗口打开页面的两种方法。一是使用vue2版本的router-link组件指令，支持target='_blank'属性；二是编程式导航，在vue2.0后借助this.$router.resolve实现新窗口打开，而常用的router.push和router.go不再支持该属性。

转载地址
1、vue-link>标签实现新窗口打开

官方文档中说 v-link 指令被 router-link> 组件指令替代，且 router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用a>标签，但事实上vue2版本的 router-link> 是支持 target="_blank" 属性的(tag=“a”)，如下
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>
2、编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $r o u t e r . p u s h 和$ router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve,如下：

seeShare(){
2    let routeUrl = this.$router.resolve({
3      path: "/share",
4      query: {id:96}
5    });
6      //let routeUrl = this.$router.resolve(`/share/${96}`) 
7    window.open(routeUrl.href, '_blank');
8 }