Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决

Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决

因为写了自制tab页面，需要实现关闭tab页面时清除缓存，切换tab页面时不清除缓存，新增和编辑复用了同一个页面

vue3写法路由：

<router-view v-slot="{ Component }">
      <div class="app_container">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :exclude="tagList().excludeList"> //tagList().excludeList是仓库全局数据，当删除页面标签时加上，有tab页面时去掉
            <component
              ref="myComponent"
              :is="wrap($route.name, Component)"
              :key="$route.name"
            />
          </keep-alive>
        </transition>
      </div>
    </router-view>

因为同一个页面的name是相同的
defineOptions({
name: “edit”,
});
我们需要用路由名称来定义组件名称

const wrapperMap = new Map();
const wrap = (name, component) => {
  let wrapper;
  const wrapperName = name;
  if (wrapperMap.has(wrapperName)) {
    wrapper = wrapperMap.get(wrapperName);
  } else {
    wrapper = {
      name: wrapperName,
      render() {
        return h("div", {}, component);
      },
    };
    wrapperMap.set(wrapperName, wrapper);
  }
  return h(wrapper);
};

参考