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 OFFICE控件测试代码
Dec 08 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
MutationObserver在页面水印实现起到的作用详解
Jul 07 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
Openlayers绘制地图标注
2020/09/28 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python多进程机制实例详解
2015/07/02 Python
单链表反转python实现代码示例
2018/02/08 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python利用opencv实现颜色检测
2021/02/23 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
小学校园广播稿(3篇)
2014/09/19 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
督导岗位职责
2015/02/04 职场文书
团员自我评价范文
2015/03/10 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫