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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
p5.js绘制旋转的正方形
Oct 23 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php验证手机号码
2015/11/11 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python上下文管理器和with块详解
2017/09/09 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
用Python开发app后端有优势吗
2020/06/29 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python如何将模块打包并发布
2020/08/30 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
如何获得EntityManager
2014/02/09 面试题
运动与健康自我评价
2015/03/09 职场文书
会议营销主持词
2015/07/03 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python