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 的不是同一个，而之前的版本中能直接这样使用，应该是使用了单例。
至于为什么不使用单例了，这个我怎么会知道？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3+vite中使用import.meta.glob的操作代码
在vue2的时候，我们一般引入多个js或者其他文件，一般使用 require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个功能用import.meta.glob来引入多个，单个的文件，下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下2022-11-11
本文详细介绍了如何在Vue3项目中集成Electron,包括安装electron和electron-builder两个依赖,以及配置.npmrc文件和手动修改镜像源的方法,整个过程详细记录了从创建项目、安装依赖、修改配置、到最终打包部署的每一步2024-10-10
这篇文章主要为大家详细介绍了vue实现无限消息无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
国密即国家密码局认定的国产密码算法,主要有SM1,SM2,SM3,SM4,下面这篇文章主要给大家介绍了关于前端vue+element使用SM4国密加密解密的相关资料,需要的朋友可以参考下2023-03-03
Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。这篇文章主要介绍了在 Vue 应用中使用 Netlify 表单功能,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue页面跳转实现页面缓存操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue数据操作之点击事件实现num加减功能,结合实例形式分析了vue.js事件响应及数值运算相关操作技巧,需要的朋友可以参考下2019-01-01
vue中的v-model原理,与组件自定义v-model详解
这篇文章主要介绍了vue中的v-model原理,与组件自定义v-model详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
应公司需求,接口需要对接vue,记录一下碰到的问题,下面这篇文章主要给大家介绍了关于Vue项目中接口调用的详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue3为什么这么快,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论