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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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手册及PHP编程标准
2006/12/17 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
React 组件间的通信示例
2018/06/14 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python sorted对list和dict排序
2020/06/09 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
六一儿童节标语
2014/10/08 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
先进员工事迹材料
2014/12/20 职场文书
中学教师个人总结
2015/02/10 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
信用卡工作证明范本
2015/06/19 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Oracle用户管理及赋权
2022/04/24 Oracle
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS