背景

有多个keep-alive 导致两个组下 互相删除不起作用。页面中路由嵌套的多，每层嵌套的下面都有一个keep-alive。然后tab菜单删除缓存未清掉。

解决方法

把嵌套的路由打平，只存在一级。外层只包裹一个keep-alive。
然后通过动态修改keep-alive组件的 include属性。来实现关闭tab标签，则删除对应的include。

代码

<keep-alive :include="keepAliveNames">
          <router-view/>
 </keep-alive> 

//keepAliveNames 可以是一个数组，里面存着的是要缓存的组件的name值。定义组件的时候要制定name。是根据这个name 做缓存的。

最好的方式是将打开的tab页面数组和keepAliveNames 整合为一个数组。数据保持统一性。这样tab页面删除，keepAliveNames里面也自动删除。如果不是一份数据，则需要维护两份数据保持一致。有点麻烦，还容易有时候不一致，产生bug。