多级router-view中使用keep-alive,子路由意外的缓存了

结构同 Keep-alive 可以缓存多层级别的子路由的页面吗

事故场景:
A ---页面
router-view(Keep-alive)
B --- A页面中的路由组件中的页面
C --- A页面中的路由组件中的页面
  router-view
  D ---- C页面中的router-view 组件中的页面 ---- A页面路由的子路由中的页面(需要Keep-alive)
  E ---- C页面中的router-view 组件中的页面 ---- A页面路由的子路由中的页面(不需要Keep-alive)
  F ---- C页面中的router-view 组件中的页面 ---- A页面路由的子路由中的页面(不需要Keep-alive)

问题:
B、C相互切换正常缓存。

C => E => C => F => E 切换正常不缓存。

C => E => B => F 切换正常不缓存。

C => E => B => E 发现 E 意外缓存。

现在就是需要怎么处理才可以使 C => E => B => E 不进行缓存?

keep-alive 具有include和exclude属性,可以通过vuex在页面动态添加和移除include和exclude进行页面缓存控制

你好!
动态配置include和exclude我尝试了一下;只不过我没有用vuex,看起来没效果;

C页面中的 router-view:

<keep-alive :include="keepAliveRoutes">
    <router-view ref="childView" />
</keep-alive>

在C页面中 watch $route,

当 $route.name === D 的时候 => keepAliveRoutes = [ D ]

其他时候 => keepAliveRoutes = [ ]

但是切换 C => E 的时候E还是有缓存。

上次有试过,用于控制 A 界面的 router-view 这会导致 C 页面 和 D页面均不会缓存了。

确实可能出现这种情况,遇到过不止一次,没有太好解决方法。
尝试下把 子路由 router-view 要显示的组件添加 name 可以解决。

我这些组件都有单独的名称,对应的路由名也跟组件名一样的