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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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的urlencode()URL编码函数浅析
2011/08/09 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
浅谈PHP中的
2016/04/23 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python3中列表list合并的四种方法
2019/04/19 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
自我评价的正确写法
2013/09/19 职场文书
大学生简单自荐信
2013/11/10 职场文书
电气专业推荐信范文
2013/11/18 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
骨干教师培训方案
2014/05/06 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
行风评议整改报告
2014/11/06 职场文书
自我检讨报告
2015/01/28 职场文书
年度考核个人总结
2015/03/06 职场文书
学校百日安全活动总结
2015/05/07 职场文书