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

时间:2021-6-5 作者:qvyue

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

第一种方案:标签router-link

官方文档中说v-link指令被组件指令替代,且不支持target=”_blank”属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本是支持target=”_blank”属性的(tag=’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);
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。