对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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
js字符编码函数区别分析
Dec 28 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
vue组件生命周期详解
Nov 07 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
Rust中的Struct使用示例详解
Aug 14 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
PHP 转义使用详解
2013/07/15 PHP
php验证码生成代码
2015/11/11 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python连接Redis的基本配置方法
2018/09/13 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
旷课检讨书1000字
2014/02/14 职场文书
材料加工工程求职信
2014/02/19 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
司机岗位职责说明书
2014/07/29 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
家长会开场白和结束语
2015/05/29 职场文书