简述vue路由打开一个新的窗口的方法


Posted in Javascript onNovember 29, 2018

简单说一下vue路由如何打开一个新的窗口

1.router-link标签

在vue的官方文档中

简述vue路由打开一个新的窗口的方法

看到这大家应该会想,既然router-link不支持target="_blank"属性,那我们该怎么用router-link打开一个新的窗口呢?别急,继续往下看~

文档中还有一处描述

简述vue路由打开一个新的窗口的方法

router-link添加tag="li"属性后,居然可以变成li标签渲染出来,真特么神奇哈,那可不可以写成tag="a",从而去替代a标签呢?我们尝试着写一哈

<router-link tag="a" target="_blank" to="/about">新品</router-link>

2.编程导航

简述vue路由打开一个新的窗口的方法

上图是官网的最新说法,vue2.0以后router.go和router.push就不支持新窗口打开的属性了,现在用一种新的方式router.resolve

let routeData = this.$router.resolve({
 path: "/about",
 query: {
 name:'lei',
 age: 18,
 phoneNum:12345678901 
 }
});
window.open(routeData.href, '_blank');

总结

以上所述是小编给大家介绍的vue路由打开一个新的窗口的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 #Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 #Javascript
js中this的指向问题归纳总结
Nov 28 #Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 #Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 #Javascript
Vue触发式全局组件构建的方法
Nov 28 #Javascript
You might like
php动态生成函数示例
2014/03/21 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
简述JS控制台的使用
2018/07/15 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
彻底理解Python中的yield关键字
2019/04/01 Python
python队列Queue的详解
2019/05/10 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
python实现从wind导入数据
2019/12/03 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
指针和引用有什么区别
2013/01/13 面试题
市场营销专业毕业生自荐信
2013/11/02 职场文书
2015年招生工作总结
2015/05/04 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server