Vue3-路由组件复用（name相同）- keepalive缓存问题

由前面Vue3 keepAlive组件源码 可知，keepAlive是通过组件名称来匹配缓存。 keepAlive多开复用路由组件缓存问题, 该方式是通过修改keepalive的源码，增加以当前路由的fullPath为key来配置缓存，该方式涉及到源码层面，不是很友好，下面通过动态修改组件名称来达到同一路由组件独立缓存效果。

实现

import { h } from 'vue'
export default function useKeepAlive() {
    // cache
    const cache = new Map()
    // 包裹一层，用于设置name（fullPath唯一）
    function refactorComponent(component, route) {
        let wrapper
        if (component) {
            const wrapperName = route.fullPath
            if (cache.has(wrapperName)) {
                wrapper = cache.get(wrapperName)
            } else {
                wrapper = {
                    name: wrapperName,
                    render() {
                        return h(component)
                    }
                }
                cache.set(wrapperName, wrapper)
            }
            return h(wrapper)
        }
    }

    return {
        refactorComponent
    }
}

使用

<router-view v-slot="{ Component, route }">
    <transition appear name="fade-transform" mode="out-in">
        <keep-alive :include="keepAliveName">
            <component :is="refactorComponent(Component, vueRoute)" :key="route.fullPath" />
        </keep-alive>
    </transition>
</router-view>

总结

该方式通过动态修改组件的name，实现组件的独立缓存