问题背景：

当使用keep-alive去缓存路由页面时(如下)，如果路由导航 根据query参数不同使用了同一个组件 ，如果单纯使用 include 或exclude 去移除缓存，会导致其他参数路由下页面的缓存一并移除，这并不是我们想要的

解决思路

方法1、使用动态 name, 根据fullPath生成包裹组件，fullPath作为name，结合include完成缓存移除

Vue3

Vue2

方法2、手动读取Vue的缓存区，移除缓存(不建议，优先方法一)

    


// 手动读取缓存区并删除
removeCache(fullPath){
  let eleNode = this.$refs.routerEle;
  if (eleNode) {
    let componentInstance = eleNode.$vnode?.parent?.componentInstance;
    if(!componentInstance) return;
    let cacheKeys = componentInstance.keys;
    let cache = componentInstance.cache;
    let index = cacheKeys.indexOf(fullPath);
    cacheKeys.splice(index, 1);
    delete cache[fullPath];
    eleNode.$destroy();
  }
}