Vue组件keep-alive多层缓存问题
从上次更新到现在已经近一年了，这一年的时间一直在焦虑。在工作中焦虑如何好好工作挣钱，在生活中焦虑如何好好生活，二者总是不那么如人意。说说最近项目的遇到的问题，就是题目。先简单介绍下项目，后端是Java，项目是重构项目，重构之前项目前端是传统的模版渲染方式。现在改成Vue、ElementUI的前端，实现前后端分离。项目比较复杂的是权限控制，这也是遇到问题的开端。我们的项目是toB项目，但是在一个项目中要对接多个不同需求的客户，不同需求客户不仅仅是要求在菜单上做到可定制，针对于每个页面上的按钮、显示字段也要做到可定制。按钮级别的可定制之后再说。菜单上的可定制，一般在Vue上就是在登陆时候获取菜单数据，然后把菜单数据格式化成vue-router的格式通过vue-router的addRouter方法生成新的菜单。流程是Login ---- fetch menu data ---- format ---- 动态addroute ---- 页面完成到这里都是正常流程，然后客户需求是要求是在自己实现的tab标签页中，打开一个新的标签页，前一个标签页的状态要保留，关闭标签页之后，状态清空。我们知道组件的缓存方式是keep-alive，并且可以通过keep-alive的include属性保持动态缓存。但是当路由有多个层级，即页面有多个的时候情况变了，keep-alive只会缓存它下面的直接出口。所以会出现一个问题，当切换不同route-view的时候，缓存失效。这个问题并没有从keep-alive层级去解决，而是做了变通。从接口获取的菜单数据生成两套结构的数据，一套供菜单使用，这套数据随便定义多少层级其实都是无所谓的。一套供vue-router使用，这套数据只保留两个层级，一个是基础的布局的父层级，另一个就是页面组件的子层级了。因为这个是改动最小的方式了，不用去动原有的vue-router，只要新生成一套供菜单使用即可。但是这种的缺点就是中间层级的没办法直接去跳转到某一个页面组件。
发表评论 (审核通过后显示评论)：