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