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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
angular4自定义组件详解
Sep 28 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php中序列化与反序列化详解
2017/02/13 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
javascript的push使用指南
2014/12/05 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
python中os模块详解
2016/10/14 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python高级property属性用法实例分析
2019/11/19 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Django celery异步任务实现代码示例
2020/11/26 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
高中生自我评语大全
2014/01/19 职场文书
表决心的诗句大全
2014/03/11 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
Nginx跨域问题解析与解决
2022/08/05 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers