对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 相关文章推荐
多个js与css文件的合并方法详细说明
Dec 26 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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中的内存管理问题
2011/08/31 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
wxPython实现画图板
2020/08/27 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
班主任工作经验材料
2014/02/02 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
违纪开除通知书
2015/04/25 职场文书
电影地道战观后感
2015/06/04 职场文书
公司食堂管理制度
2015/08/05 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python