vue3 keep-alive 多个路由使用同一个组件的缓存问题

当打开多个内页签页面， keep-alive 缓存每个页面，导致内存溢出。顾添加 max=10， 在此基础上希望每次关闭内页签页面时，能够手动的清除当前页面的缓存。

我们可以通过改变 exclude 来实现手动清除 keep-alive 缓存。exclude 需要的是组件的名称。

这里就有一个问题：我们多个编辑页面公用一个组件， 但我们会有多个缓存，也就是当打开多个编辑页面， 当关闭其中一个编辑页的时候， 传入对应组件的 name， 会把所有的编辑页面的缓存都移除。

这时该怎么解决呢？我们可以给不同的编辑页面设置一个唯一的组件名称， 具体实现如下：

<router-view v-slot="{ Component }">
  <div class="app-main-height">
    <keep-alive :max="10" :exclude="excludes">
      <component
        :is="formatComponentInstance(Component, $route)"
        :key="$route.path"
      />
    </keep-alive>
  </div>
</router-view>

// 用来存已经创建的组件
const wrapperMap = new Map();
// 将router传个我们的组件重新换一个新的组件，原组件包里面
function formatComponentInstance(component, route) {
  let wrapper;
  if (component) {
    const wrapperName = route.path;
    if (wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName);
    } else {
      wrapper = {
        name: wrapperName,
        render() {
          return h(component);
        }
      };
      wrapperMap.set(wrapperName, wrapper);
    }
    return h(wrapper);
  }
}