资讯专栏INFORMATION COLUMN

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

xingqiba / 2694人阅读

摘要:分析原因实例后的不能刷新页面,应该是因为它与全局的中的的不是同一个,而之前的版本中能直接这样使用,应该是使用了单例。

在 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://www.ucloud.cn/yun/94865.html

相关文章

  • 手挽手带你学VUE:四档 Vue-cli3 Vuex Vue-router

    摘要:安装过后到命令行执行检查版本,如果弹出版本的话恭喜你安装成功,我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或,你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。 视频教程 由于思否不支持视频外链,视频请移步http://www.henrongyi.top 你能学到什么 在这一期的学习进度中,我们会开始学习在我们工作开...

    Sourcelink 评论0 收藏0
  • 手挽手带你学VUE:四档 Vue-cli3 Vuex Vue-router

    摘要:安装过后到命令行执行检查版本,如果弹出版本的话恭喜你安装成功,我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或,你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。 视频教程 由于思否不支持视频外链,视频请移步http://www.henrongyi.top 你能学到什么 在这一期的学习进度中,我们会开始学习在我们工作开...

    AlphaWallet 评论0 收藏0
  • 新手使用vue-router传参时注意事项

    摘要:使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了这个地方其实还有一个问题,当你传递的参数是类型,第一次是没有问题的,获取的时候也是类型,但是当你刷新页面后,变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...

    microcosm1994 评论0 收藏0
  • 新手使用vue-router传参时注意事项

    摘要:使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了这个地方其实还有一个问题,当你传递的参数是类型,第一次是没有问题的,获取的时候也是类型,但是当你刷新页面后,变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...

    clasnake 评论0 收藏0
  • Vue-router基本学习(1)

    摘要:单页面应用网页只有在第一次进入页面的的时候请求服务器的文件,接下来的页面跳转是基于内部的。单页面应用第一次要将所有的资源全部加载,所以首屏时间慢,但是后续的跳转不需要再次向服务器发请求。 多页面应用:网页HTML文件是请求后台发过来的。每次切换页面都会从后台把页面文件传输回来。单页面应用:网页只有在第一次进入页面的、的时候请求服务器的HTML文件,接下来的页面跳转是基于内部的route...

    IamDLY 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<