浏览器的F5刷新与vue路由刷新的区别?

KenOscar
  • 883

背景:
vue项目里 在vueX里面存了一个通过接口获取的对象

在进入到页面A之后,console.log(vueX对象) 这个时候是正常可以输出的

但是摁了F5 或者 采用浏览器的刷新页面之后,console输出的就是空

但是如果用路由刷新的方法 console是可以输出的

输出的方法 写在了created钩子函数里

请问 这两种刷新有什么区别 另外 如果想要监听vuex怎么样监听最好

回复
阅读 5.3k
3 个回答

题主首先要明白为什么要使用vue和vue-router构建单页面应用。
其次要明白单页面应用和传统页面的区别。

所以单页面路由跳转是 无刷新 跳转,表面看起来就像是一个app应用,表现效果就像你写的 tab 选项卡,所有的数据都还存在 内存里,页面是无重载的。

F5刷新做了什么事呢,重新载入页面,销毁之前所有的数据,某些数据你写在某些组建的 声明周期里,你带着url按F5刷新,那些加载数据的 组件可能根本没有加载,生命周期没有运行,哪里来的数据呢

欧阳
  • 4
新手上路,请多包涵

F5刷新之后vuex 的state存储的数据会初始化, 你如果想保存, 可以监听window的reload事件, 把state的数据拷贝一份到sessionstroage里面 我没试过,这只是我的思路. 不对不要见怪

F5刷新相当重新请求页面

路由器刷新, 重新创建路由页面

路由提供的钩子进行监听

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏