对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用于查询操作的实现代码
May 10 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
js实现无缝滚动图
Feb 22 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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
cmd下运行php脚本
2008/11/25 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
python处理json数据中的中文
2014/03/06 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python文件和流(实例讲解)
2017/09/12 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python 常见的排序算法实现汇总
2020/08/21 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
医学类个人求职信范文
2014/02/05 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
学术会议领导致辞
2015/07/29 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Window server中安装Redis的超详细教程
2021/11/17 Redis
redis数据结构之压缩列表
2022/03/21 Redis