Vue

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

2021-05-11  本文已影响0人  菲儿_cdd4

开发需求: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);
}
上一篇 下一篇

猜你喜欢

热点阅读