解决vue3 keep-alive多个路由共用一个组件的缓存问题

问题描述

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

常规写法

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

解决办法

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

完整代码：

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

const wrapperMap = new Map();
const newComponent = (component,route){
    let wrapper;
    if (!component) return;
    
    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);
}