vue-router3.0版本中 router.push 不能刷新页面的问题


Posted in Javascript onMay 10, 2018

在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过router实例无法跳转

昨天发现有些路由不能正常跳转,找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。
出现的情况是 router.push 后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面。

我看了一下 package.json,我的 vue 和 axios 是没有写版本号,但 vue-router 明明写了版本号,怎么可能以前行的,现在就不行了呢?

然后,我使用 npm view vue-router 查看后才发现使用的已经不是 package.json 中的版本了,于是断定也许是我前几天 npm update 了!

( 以后不要随便 update 了! )

具体为什么新版本不行了,我也不太清楚。

最简单的解决办法当然是直接把 router.push 改成 this.$router.push

但是,如果这样可以的话,我当初为什么要在组件内再实例化一个 Router 呢?

显然是因为有些地方的 this 并不是 vue,那么,再实例化一个 vue,然后使用 vue.$router 行吗?

答案当然是不行的,因为这个 vue 与 其它地方的 vue 应该又不是同一个对象了。

那么,终极的解决方案就是:

把全局的 vue 中的 router 加到 window 中,也就在 main.js 中使用:

window.router=router

然后其它任何地方就可以直接愉快地使用 router.push 等 router 的方法了。

分析原因:

实例后的 router 不能刷新页面,应该是因为它与全局的vue中的 this.$router 的不是同一个,而之前的版本中能直接这样使用,应该是使用了单例。

至于为什么不使用单例了,这个我怎么会知道?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
vue计算属性和监听器实例解析
May 10 #Javascript
js正则相关知识点专题
May 10 #Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 #Javascript
Javascript Promise用法详解
May 10 #Javascript
jQuery实现模糊查询的方法分析
May 10 #jQuery
async/await地狱该如何避免详解
May 10 #Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 #Javascript
You might like
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python每天必学之bytes字节
2016/01/28 Python
python与mysql数据库交互的实现
2020/01/06 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
关于赌博的检讨书
2014/01/24 职场文书
军训自我鉴定范文
2014/02/13 职场文书
作风建设演讲稿
2014/05/23 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
初中信息技术教学计划
2015/01/22 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android