vue-router跳转时打开新页面的两种方法


Posted in Javascript onJuly 29, 2019

最近还是在痛苦的挣扎中

挣扎吧

记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法:

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的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下:

seeShare(){
   let routeUrl = this.$router.resolve({
     path: "/share",
     query: {id:96}
   });
   window.open(routeUrl.href, '_blank');
}

何时成为大佬

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
使用js画图之饼图
Jan 12 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
微信小程序文字显示换行问题
Jul 28 #Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 #Javascript
pageGroup.js实现分页功能
Jul 27 #Javascript
laypage+SpringMVC实现后端分页
Jul 27 #Javascript
laypage.js分页插件使用方法详解
Jul 27 #Javascript
layui2.0使用table+laypage实现真分页
Jul 27 #Javascript
You might like
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php中final关键字用法分析
2016/12/07 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
python实现ipsec开权限实例
2014/11/11 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python db类用法说明
2020/07/07 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
行政部主管岗位职责
2013/12/28 职场文书
物业保安岗位职责
2014/07/02 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
卖房授权委托书样本
2014/10/05 职场文书
律师授权委托书范本
2014/10/07 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
自信主题班会
2015/08/14 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
创业计划书之物流运送
2019/09/17 职场文书