简述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 省地市级联选择
Feb 07 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
ECMAScript6--解构
Mar 30 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
p5.js临摹旋转爱心
2019/10/23 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python实现数据写入excel表格
2018/03/25 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python操作yaml说明
2020/04/08 Python
浅析Python __name__ 是什么
2020/07/07 Python
Python如何输出百分比
2020/07/31 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
导游词之广西漓江
2019/11/02 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
小程序实现文字循环滚动动画
2021/06/14 Javascript
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis