vue-router跳转时打开新页面的两种方法


Posted in Javascript onJuly 29, 2019

最近还是在痛苦的挣扎中

挣扎吧

记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法:

1、<vue-link>标签实现新窗口打开

官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a"),如下:

<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>

2、编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下:

seeShare(){
   let routeUrl = this.$router.resolve({
     path: "/share",
     query: {id:96}
   });
   window.open(routeUrl.href, '_blank');
}

何时成为大佬

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
微信小程序文字显示换行问题
Jul 28 #Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 #Javascript
pageGroup.js实现分页功能
Jul 27 #Javascript
laypage+SpringMVC实现后端分页
Jul 27 #Javascript
laypage.js分页插件使用方法详解
Jul 27 #Javascript
layui2.0使用table+laypage实现真分页
Jul 27 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python定时执行指定函数的方法
2015/05/27 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Django中URL的参数传递的实现
2019/08/04 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
大学生村官工作感言
2014/01/10 职场文书
24岁生日感言
2014/01/13 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
企业百日安全活动总结
2015/05/07 职场文书
六五普法学习心得体会
2016/01/21 职场文书
初中政治教师教学反思
2016/02/23 职场文书
新手初学Java List 接口
2021/07/07 Java/Android