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 继承详解(三)
Jul 13 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
Vue中props的使用详解
Jun 15 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
浅谈Vue的响应式原理
May 30 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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 分库分表hash算法
2009/11/12 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php中explode函数用法分析
2014/11/15 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
Javascript图像处理思路及实现代码
2012/12/25 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
软件配置管理有什么好处
2015/04/15 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
办公室文员自荐书
2014/02/03 职场文书
员工生日会策划方案
2014/06/14 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年库房工作总结
2015/04/30 职场文书
小人国观后感
2015/06/11 职场文书
签证工作证明模板
2015/06/15 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android