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 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
layui实现三级联动效果
Jul 26 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Django  ORM 练习题及答案
2019/07/19 Python
python处理document文档保留原样式
2019/09/23 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
使用Python实现音频双通道分离
2020/12/25 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
机电一体化毕业生自荐信
2014/06/19 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
vue的项目如何打包上线
2022/04/13 Vue.js