对vue2.0中.vue文件页面跳转之.$router.push的用法详解


Posted in Javascript onAugust 24, 2018

vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是:

<router-link to="/miniCard/statement/horizon">
  <button class="btn btn-default colorDe">继续</button>
</router-link>

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .$router.push ,用法如下:

this.$router.push({path: '/...'});

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

希望本文对您有所帮助!

拓展知识:解决this.$router.push无法在新窗口打开的问题

如下所示:

let routeData = this.$router.resolve({ path: '/reportpreview', query: { id: id } });
 window.open(routeData.href, '_blank');

以上这篇对vue2.0中.vue文件页面跳转之.$router.push的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 #Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python获取交互式ssh shell的方法
2019/02/14 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
中学生英语演讲稿
2014/04/26 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Nginx配置之禁止指定IP访问
2022/05/02 Servers
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers