vue3后台项目实现页面缓存（keep-alive）

一、约束路由对象，动态控制是否开启页面缓存

开发前请对路由对象进行约束，后期更好的兼容动态控制页面缓存的开启与关闭

routerItem = 
{
   path,
   component,
   meta: { 
       title, 
       icon, 
       keepAlive // 是否开启页面缓存
   },
   parentId,
   id,
   name,
   redirect
}

二、将keep-alive的include数据通过状态管理工具进行管理（pinia）

// 此处我是在 stores/tagNavigationStore 中
export const useTagNavigationStore = defineStore('tagNavigation', () => {
    let keepAliveInclude = ref<string[]>([])
    const changeKeepAliveInclude = (data: string[]) => {
        keepAliveInclude.value = data
    }
    return {keepAliveInclude}
})

三、使用keep-alive组件开启缓存

<router-view v-slot="{ Component }">
    <transition :enter-active-class="`my-element animate__animated ${thmem.activeAnimate.enterActive}`"
                :leave-active-class="`my-element animate__animated ${thmem.activeAnimate.leaveActive}`" mode="out-in">
        <KeepAlive :include="appStore.tagNavigationStore.keepAliveInclude">
            <component :is="Component" :key="Component.component" v-if="isRouterAlive" />
        </KeepAlive>
    </transition>
</router-view>

四、自定义组件名称

由于keep-alive的include属性基于组件名称进行操作，但是在vue3的setup语法糖中无法像vue2一样直接给组件自定义名称，这里我们结合一个插件[unplugin-vue-setup-extend-plus]进行操作

1、安装

yarn add unplugin-vue-setup-extend-plus

2、配置

// vite.config.ts
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
export default defineConfig(({ mode }) => {
    plugins:[
        vueSetupExtend({})
    ]
})

3、使用

注意，这里的页面组件名称最好与路由对象中的name保持一致，方便后面的维护与管理

// 需要缓存的页面组件
<script setup lang="ts" name="componentName"></script>

五、根据实际业务需求为keepAliveInclude提供动态添加的方法

由于我们的路由对象的meta中约定好了keepAlive属性，所以我们可以根据路由表来动态获取需要被缓存的组件名称，然后通过useTagNavigationStore中的changeKeepAliveInclude方法对keepAliveInclude进行更改，从而实现动态设置keep-alive的include，动态控制页面缓存的开启与关闭，由于我的项目是基于路由对象和标签导航来动态设置，业务场景不同，有所差异，这里就不做演示，但是大致思路就是这样