vue中怎么清空tab选项卡的缓存_Vue缓存 菜单、多Tab解决方案

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下的路由组件。

按照上面的