简述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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
js中开关变量使用实例
Feb 24 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
js利用拖放实现添加删除
Aug 27 Javascript
微信小程序下拉刷新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中的错误处理、异常处理机制分析
2012/05/07 PHP
php获取远程文件大小
2015/10/20 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP加密解密类实例代码
2016/07/20 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Python环境变量设置方法
2016/08/28 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Pytorch之parameters的使用
2019/12/31 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Python中的全局变量如何理解
2020/06/04 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
建议书的格式
2014/05/12 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android