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

 更新时间:2018年05月10日 09:54:06   作者:agui1989  
这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue引入Excel表格插件的方法

    vue引入Excel表格插件的方法

    这篇文章主要为大家详细介绍了vue引入Excel表格插件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Vue中的v-for列表循环示例详解

    Vue中的v-for列表循环示例详解

    循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue3使用全局websocket的示例详解

    vue3使用全局websocket的示例详解

    这篇文章主要为大家详细介绍了vue3使用全局websocket的相关知识,文中的示例代码讲解详细,对我们深入学习vue3有一定的帮助,感兴趣的小伙伴可以参考一下
    2023-10-10
  • Vue.js上传图片到阿里云OSS存储的方法示例

    Vue.js上传图片到阿里云OSS存储的方法示例

    这篇文章主要介绍了Vue.js上传图片到阿里云OSS存储的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vant如何实现Collapse折叠面板标题自定义

    vant如何实现Collapse折叠面板标题自定义

    这篇文章主要介绍了vant如何实现Collapse折叠面板标题自定义,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中element-plus icon图标的正确使用姿势

    vue3中element-plus icon图标的正确使用姿势

    element-plus官方提示,Icon图标正在向SVG Icon迁移,之前使用的Font Icon即将被弃用,下面这篇文章主要给大家介绍了关于vue3中element-plus icon图标的正确使用姿势,需要的朋友可以参考下
    2022-03-03
  • vue+elementUI 实现内容区域高度自适应的示例

    vue+elementUI 实现内容区域高度自适应的示例

    这篇文章主要介绍了vue+elementUI 实现内容区域高度自适应的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-09-09
  • Vue中从template到jsx语法教程示例

    Vue中从template到jsx语法教程示例

    这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • vue恢复初始数据this.$data,this.$options.data()解析

    vue恢复初始数据this.$data,this.$options.data()解析

    这篇文章主要介绍了vue恢复初始数据this.$data,this.$options.data()解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue实战之项目开发时常见的几个错误汇总

    Vue实战之项目开发时常见的几个错误汇总

    vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03

最新评论