简述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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
js arguments对象应用介绍
Nov 28 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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开发文件系统实例讲解
2006/10/09 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
经验几则 推荐
2006/09/05 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
《盘古开天地》教学反思
2014/02/28 职场文书
销售队伍口号
2014/06/11 职场文书
促销活动总结怎么写
2014/06/25 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
法律意见书范文
2015/05/20 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android