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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
vue3.0 上手体验
Sep 21 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
PHP5 字符串处理函数大全
2010/03/23 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
十八届三中全会学习方案
2014/02/16 职场文书
办公室副主任职责范本
2014/03/08 职场文书
政府门卫岗位职责
2014/04/29 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
幼儿园教师求职信
2015/03/20 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android