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 相关文章推荐
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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使用qr生成二维码的示例分享
2014/01/20 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP闭包函数详解
2016/02/13 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
python安装Scrapy图文教程
2017/08/14 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
服装采购员岗位职责
2014/03/15 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
学校火灾防控方案
2014/06/09 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
学生上课说话检讨书
2014/10/25 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python