简述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当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
javascript中Object使用详解
Jan 26 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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代码
2013/12/03 PHP
php中使用GD库做验证码
2016/03/31 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python实现冒泡排序算法的两种方法
2018/03/10 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
解决django FileFIELD的编码问题
2020/03/30 Python
零基础小白多久能学会python
2020/06/22 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
企业管理培训感言
2014/01/27 职场文书
质检员岗位职责范本
2015/04/07 职场文书