简述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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
jquery编写日期选择器
Mar 16 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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/03/21 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
splice slice区别
2006/10/09 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
金士达面试非笔试
2012/03/14 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
人力资源求职信
2014/05/25 职场文书
招标承诺书
2014/08/30 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
新员工试用期自我评价
2015/03/10 职场文书
航班延误投诉信
2015/07/02 职场文书
学校教师培训工作总结
2015/10/14 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
redis中lua脚本使用教程
2021/11/01 Redis
Go语言编译原理之变量捕获
2022/08/05 Golang