1.需求
在项目开发中,前端难免遇到需要路由缓存的需求。在之前一个React项目中,查询各种资料和插件后,了解到React要配合React-router进行路由缓存,会有很多意想不到的问题。所以在React项目中,我们都避免接收到需要路由缓存的需求。
最近在开发一个vue项目中,由于vue原生有Keep-alive组件以及include,exclude的各种api来实现路由缓存。所以我们决定大胆的接下这个坑。
2.踩坑
一开始我们也是直接用keep-alive包裹住router-view 加上路由的fullPath作为router-view的key值,然后用include定义需要缓存的组件。
以及在路由定制的meta里面定义keepalive是否需要缓存字段来处理缓存
对于一般的项目,其实这样解决缓存已经可以了。但是我们是对应B端的管理系统,会有菜单页,Tab页,一个路由可能在不同的情况会需要缓存以及不需要缓存两种情况。在动态改变keepaliveList或者$route.meta.keepalive后,并没有触发组件缓存的销毁以及再缓存。所以我们只能变换方法来实现。
3.解决思路--清理详情页缓存
我们的项目会有多个Tab的形式,类似于element-ui的tabs组件。
我们在相同tab下的路由配置了相同的pageKey代表在一个tab下的路由组件。
按照上面的