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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php的socket编程详解
2016/11/20 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
如何利用python 读取配置文件
2021/01/06 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
竞聘自述材料
2014/08/25 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
长城的导游词
2015/01/30 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang