解决Vue3中KeepAlive多个路由使用相同组件导致的缓存问题

组件和路由一对一的情况下，使用keep-alive结合router-view，其中include属性接收需要缓存的组件的名称。
但是当遇到组件和路由一对多的情况下，比如动态路由配置{path:'/article/detail/:id', component:Article}，文章详情页以及列表编辑页等等组件，会出现数据重叠的问题。

常规写法

<router-view v-slot="{ Component, route }">
  <keep-alive :include="keepAliveList">
    <component :is="Component" />
  </keep-alive>
</router-view>

解决办法

keep-alive的属性include是用来存储组件name，那我们是不是可以使组件名是动态，根据路由的变化而变化。组件名不能直接修改，直接修改组件名会不生效。我们根据路由重新新建一个组件，原组件包在里面，这样我们就能解决这个问题。

完整代码：

<router-view v-slot="{ Component, route }">
  <keep-alive :include="keepAliveList">
    <component :is="newComponent(component, route)" />
  </keep-alive>
</router-view>

const wrapperMap = new Map();
const newComponent = (component, route) => {
  if (!component) {
    return
  } else if (['defaultReport'].includes(component.type.name)) {
    // 解决KeepAlive多个路由共用一个组件的缓存问题
    let wrapper;
    const wrapperName = route.name  //路由名称
    if (wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName);
    } else {
      wrapper = {
        name: wrapperName,
        render() {
          return h(component);
        }
      }
      wrapperMap.set(wrapperName, wrapper);
    }
    return h(wrapper);
  } else {
    return component
  }
}