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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
JavaScript实现轮播图效果
Oct 30 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 图片上添加透明度渐变的效果
2009/06/29 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python高效编程技巧
2013/01/07 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python之pandas用法大全
2018/03/13 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
工作经历证明书范文
2014/11/02 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python基础教程,Python入门教程(超详细)
2021/06/24 Python