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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
node使用request请求的方法
Dec 20 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设置session(过期、失效、有效期)
2015/11/12 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python集合用法实例分析
2015/05/30 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python中树与树的表示知识点总结
2019/09/14 Python
python文字转语音实现过程解析
2019/11/12 Python
python类中super() 的使用解析
2019/12/19 Python
python处理写入数据代码讲解
2020/10/22 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
30年同学聚会感言
2014/01/30 职场文书
2014年终个人工作总结
2014/11/07 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
Vue.Draggable实现交换位置
2022/04/07 Vue.js