Vue组件keep-alive多层缓存问题

作者 : 开心源码 本文共863个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共147人阅读

从上次升级到现在已经近一年了,这一年的时间一直在焦虑。在工作中焦虑如何好好工作挣钱,在生活中焦虑如何好好生活,二者总是不那么如人意。

说说最近项目的遇到的问题,就是题目。先简单详情下项目,后台是Java,项目是重构项目,重构之前项目前台是传统的模版渲染方式。现在改成Vue、ElementUI的前台,实现前后台分离。项目比较复杂的是权限控制,这也是遇到问题的开端。

我们的项目是toB项目,但是在一个项目中要对接多个不同需求的用户,不同需求用户不仅仅是要求在菜单上做到可定制,针对于每个页面上的按钮、显示字段也要做到可定制。按钮级别的可定制之后再说。菜单上的可定制,一般在Vue上就是在登陆时候获取菜单数据,而后把菜单数据格式化成vue-router的格式通过vue-router的addRouter方法生成新的菜单。

流程是

Login? —-? ?fetch menu data —- format —- 动态addroute —- 页面完成

到这里都是正常流程,而后用户需求是要求是在自己实现的tab标签页中,打开一个新的标签页,前一个标签页的状态要保留,关闭标签页之后,状态清空。

我们知道组件的缓存方式是keep-alive,并且可以通过keep-alive的include属性保持动态缓存。但是当路由有多个层级,即页面有多个<route-view>的时候情况变了,keep-alive只会缓存它下面的直接<route-view>出口。所以会出现一个问题,当切换不同route-view的时候,缓存失效。

这个问题并没有从keep-alive层级去处理,而是做了变通。从接口获取的菜单数据生成两套结构的数据,一套供菜单使用,这套数据随意定义多少层级其实都是无所谓的。一套供vue-router使用,这套数据只保留两个层级,一个是基础的布局的父层级,另一个就是页面组件的子层级了。由于这个是改动最小的方式了,不用去动原有的vue-router,只需新生成一套供菜单使用就可。但是这种的缺点就是中间层级的没办法直接去跳转到某一个页面组件。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Vue组件keep-alive多层缓存问题

发表回复