vue-router3.0版本中 router.push 不能刷新页面的问题

作者:agui1989 时间:2024-04-30 10:44:34 

在 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 的不是同一个,而之前的版本中能直接这样使用,应该是使用了单例。

至于为什么不使用单例了,这个我怎么会知道?

来源:https://segmentfault.com/a/1190000014803149

标签:vue,router.push,刷新
0
投稿

猜你喜欢

  • 脆弱的用户体验

    2010-01-28 12:34:00
  • javascript 通过键名获取键盘的keyCode方法

    2024-04-22 22:18:21
  • 利用PyQt5中QLabel组件实现亚克力磨砂效果

    2023-12-13 18:33:04
  • 不用加载Include文件也能生成选择列表吗?

    2009-10-29 12:30:00
  • javascript中不易分清的slice,splice和split三个函数

    2024-04-28 09:37:29
  • Python中logging日志库实例详解

    2023-10-04 13:26:25
  • python实现在线翻译功能

    2023-06-02 22:12:38
  • 带有定位当前位置的百度地图前端web api实例代码

    2024-05-08 10:11:56
  • 详解数据库语言中的null值

    2024-01-15 02:50:29
  • SqlServer应用之sys.dm_os_waiting_tasks 引发的疑问(上)

    2024-01-12 15:24:51
  • 百度百科中的asp词条:什么是asp

    2008-10-11 14:38:00
  • Python中的tkinter库简单案例详解

    2021-01-20 14:25:16
  • 一文搞懂MySQL元数据锁(MDL)

    2024-01-14 18:29:08
  • 基于OpenCV python3实现证件照换背景的方法

    2023-01-30 06:25:54
  • Django分页器的用法你都了解吗

    2022-06-06 21:18:39
  • System.Data.OleDb.OleDbDataAdapter与System.Data.OleDb.OleDbDataReader的区别是什么?

    2009-10-29 12:17:00
  • Python3+Requests+Excel完整接口自动化测试框架的实现

    2022-12-12 00:19:52
  • Python中 Lambda表达式全面解析

    2021-07-05 04:58:01
  • ASP.NET MVC4入门教程(四):添加一个模型

    2024-05-09 09:02:58
  • 使用XML技术上传文件的例子

    2008-05-29 11:33:00
  • asp之家 网络编程 m.aspxhome.com