Vue项目全局配置页面缓存之按需读取缓存的实现详解

大佬教程收集整理的这篇文章主要介绍了Vue项目全局配置页面缓存之按需读取缓存的实现详解，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

写在前面

一个web app的实际使用场景中，有一些情景的交互要求，是记录用户的浏览状态的。最常见的就是在列表页进入详情页之后，再返回到列表页，用户希望返回到进入详情页之前的状态继续操作。但是有些使用场景，用户又是希望能够获取最新的数据，例如同级列表页之间切换的时候。

如此，针对上述两种使用场景，需要实现按需读取页面缓存。由于SPA应用的路由逻辑也是在前端实现的，因此可以在前端对路由的逻辑进行设置以实现所需效果。

使用技术

• Vue.js作为主要框架
• Vue-router作为前端路由管理器
• Vuex作为状态管理工具

总体思路

keep-alive判断当前组件是否读取缓存的节点，在整个生命周期里面非常靠后，在afterEach之后，基本在组件实例创建之前。（因此在此之前对当前组件是否读取缓存进行处理都是可行的，我选择在全局前置守卫进行处理）

而判断当前组件是否缓存的节点，则早于组件的beforeRouteLeave钩子。

基于上述逻辑，本方案解决的逻辑是，对当前打开的页面进行判断，动态生成需要keepAlive的组件数组配置，对有可能需要缓存的先行进行缓存，然后在每次路由切换的时候，再进行判断，按需读取页面缓存。

1. 使用kepp-alive进行缓存，使用include属性对需要缓存的页面进行配置。
2. 由于需要缓存的页面配置系动态生成，所以使用vuex储存该配置。
3. 在路由元信息中写入两个配置，一是该路由是否需要缓存，二是从相关路由进入时才进行缓存的特定路由数组。
4. 在beforeEach进行设置，每次进入路由之前，对进入的路由及其所有父级路由进行判断，若需要缓存且命中特定路由数组，则将相关路由添加至缓存配置文件中；若不符合，则将相关路由删除。（此步骤实现了路由切换时，需要则读取缓存，不需要则重新获取数据。）
5. 使用全局mixin，进入相关组件之前，对当前路由进行判断，如果需要缓存的则将该路由添加至缓存配置中。（此步骤实现了缓存当前打开的需要缓存的页面。）

具体实现

1. 使用include属性控制路由缓存

但是vue-router的环境下，是没有局部注册名称的，只能为组件补全name属性。

因此，请务必给组件添加 name 选项，否则匿名组件将全部应用缓存。

大佬总结

以上是大佬教程为你收集整理的Vue项目全局配置页面缓存之按需读取缓存的实现详解全部内容，希望文章能够帮你解决Vue项目全局配置页面缓存之按需读取缓存的实现详解所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。