简述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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
js+css3实现旋转效果
Jan 20 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
药学专业大学生自荐信
2013/09/28 职场文书
实习鉴定评语
2014/01/19 职场文书
担保书怎么写
2014/04/01 职场文书
抽样调查项目计划书
2014/04/24 职场文书
专家推荐信模板
2014/05/09 职场文书
2014年班组工作总结
2014/11/20 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
第二次离婚起诉书
2015/05/18 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android