Vue3 使用多级组件 Keepalive 相同路由的配置

本文适用于Vue3下的keepalive缓存路由，已通过Ant-Design Vue 的Tabs组件测试

一、路由结构

项目的路由结构为固定+后台生成

{
    path: '/',
    name: '首页',
    component: TabsView,
    redirect: '/login',
    children: []
}

若项目有多级路由，即有多个地方有<router-view/>，则需要在会切换的地方修改即可，其他地方可保持不变，这里的结构为

App.vue -> TabsView.vue -> PageView.vue

所以App.vue保持<router-view/>其他参考下面的文章

二、文件配置

VueX

采用VueX来缓存include数据

state: () => ({
    keepAliveList: ['']
})
mutations: {
    closeTab(state, values) {
        state.keepAliveList = state.keepAliveList.filter(item=>!values.includes(item))
    },
    updateKeepList(state, val) {
        let index = state.keepAliveList.findIndex(
            (item) => item === val
        );
        if (index === -1) {
            state.keepAliveList.push(val);
        }
    }
}

TabsView.vue

因为存在同一组件，被不同路由的情况，所以添加以下方法，转自Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决方案

Template 部分

<router-view v-if="!refreshing" ref="tabContent" v-slot="{ Component }">
    <keep-alive :include="store.state.setting.keepAliveList">
        <component :is="wrap(route.name, Component)" :key="route.fullPath"/>
    </keep-alive>
</router-view>

Script 部分

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 component
        },
    }
    wrapperMap.set(wrapperName, wrapper)
    }
    return h(wrapper)
}

//刷新方法

//关闭本页面方法
const remove = (key) =>{
    const clearCaches = [key]
    store.commit("closeTab", clearCaches )
}

//关闭其他页面方法，参考上面的方法，将要关闭的组件名称添加到数组提交到closeTab
const closeRight ...
const closeLeft ...
const closeOthers ...

这里的refreshing为刷新时使用，当标签页刷新时，切换状态

PageView

Template 部分

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