美文网首页Vue
vue项目如何实现跳转到新页面

vue项目如何实现跳转到新页面

作者: 菲儿_cdd4 | 来源:发表于2021-05-11 11:50 被阅读0次

开发需求:vue项目实现跳转到新的标签页
大致研究了以下实现思路,一共两种方案:1.router-link实现;2.this.$router.resolve实现

第一种方案:标签router-link

官方文档中说v-link指令被组件指令替代,且不支持target="_blank"属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本是支持target="_blank"属性的(tag='a')。

<!-- 当前窗口打开 -->
<router-link to="/home">首页</router-link>
<!-- 新窗口打开 -->
<router-link target="_blank" to="/home">新的标签页打开首页</router-link>

注:如果你在<a>元素上添加一个target="_blank",则@click="navigate"处理器会被忽略

第二种方案:编程式导航 this.$router.resolve

有时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是router.push和router.go。但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用router.resolve。如果想知道里面的一些属性的话,可自行打印。

go(url, type) {
     const newsUrl = this.$router.resolve(url);
     window.open(newsUrl.href);
}

相关文章

网友评论

    本文标题:vue项目如何实现跳转到新页面

    本文链接:https://www.haomeiwen.com/subject/shgudltx.html