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 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
javascript关于继承解析
May 10 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 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 开源框架22个简单简介
2009/08/24 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php绘制一个扇形的方法
2015/01/24 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php实现图片缩略图的方法
2016/03/29 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
利用python为运维人员写一个监控脚本
2018/03/25 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
护士进修自我鉴定
2014/02/07 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
个人授权委托书格式
2014/08/30 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
信访工作汇报材料
2014/10/27 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
楚门的世界观后感
2015/06/03 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书