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

yanessa_yu2023-10-19 20:41

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

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

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

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

html 复制代码

<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>

js 复制代码

// 用来存已经创建的组件
  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);
    }
  }