VUE3，自定义控制keep-alive缓存

安装插件

npm install vite-plugin-vue-setup-extend?--save

在vite.config.ts中

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

.....

plugins：[

? ? ? ? vue(),

????????VueSetupExtend(),

? ? ? ? .....

]

useKeepalive.ts

import { ref } from "vue"

export const includes = ref<string[]>([]);

// 增加缓存

export function addKeepAliveCache(name: string) {

? ? if (includes.value.find(item => item === name)) return;

? ? includes.value.push(name);

}

// 移除缓存

export function removeKeepAliveCache(name: string) {

? ? const index: number | undefined | null = includes.value.findIndex(item => item === name)

? ? if([null, undefined].includes(index)) return

? ? includes.value.splice(index, 1);

}

// 清空缓存

export function clearKeepAliveCache() {

? ? includes.value = [];

}

App.vue

<router-view v-slot="{ Component }">

? ? <keep-alive??:include="includes">

? ? ? ?<component :key="route.name || route.path" :is="Component"?/>

? ? </keep-alive>

</router-view>

在路由钩子中：

router.afterEach((to) => {

? ? if (to.meta?.keepAlive) {

? ? ? ? const matched = router.currentRoute.value.matched ?? []

? ? ? ? const instance = matched.find((instan: any) => instan.path === to.path)

? ? ? ? // 读取路由组件实例的name属性

? ? ? ? const name: string = String(instance?.components?.default?.name || '');

? ? ? ? if (name) {

? ? ? ? ? addKeepAliveCache(name)

? ? ? ? }

? ? }

})

在进入别的一级菜单前

clearKeepAliveCache()