可控制缓存销毁的 keepAlive 组件实现详解

const routes = [
    {
        path: '/index',
        name: 'index',
        component: () => import('@/views/index.vue'),
        meta: {
            title: '首页',
            keepAlive: false // 缓存标识
        }
    }
]

<template>
    <router-view v-slot="{ Component, route }">
        <keep-alive>
            <component :is="Component" v-if="route.meta.keepAlive"/>
        </keep-alive>
        <component :is="Component" v-if="!route.meta.keepAlive"/>
    </router-view>
</template>

<script> 
export default { 
    name: 'component-name' // 你的组件名 
} 
</script>

// 安装插件
npm i unplugin-vue-components -D     
// 在页面 script setup 标签中定义 name
<script setup name="component-name">
// This starter template is using Vue 3 <script setup> SFCs
// ...
</script>

{
    path: '/list-one',
    name: 'list-one',
    component: () => import('@/views/list-one.vue'),
    meta: {
        title: '列表 1',
        keepAlive: false
    }
},
{
    path: '/list-two',
    name: 'list-two',
    component: () => import('@/views/list-two.vue'),
    meta: {
        title: '列表 2',
        keepAlive: true
    }
}

/**
 * @description: 缓存控制
 */
 export const useKeepAliverStore = defineStore('keepAliver', {
    state: () => ({
        caches: []
    }),
    getters: {},
    actions: {
        add(name) {
            if (!this.caches.includes(name)) {
                this.caches.push(name)
            }
        },
        remove(name) {
            this.caches = this.caches.filter((item) => item !== name)
        },
        clear() {
            this.caches = []
        }
    }
})

import { useKeepAliverStore } from '@/store/modules/keepAliver'
export function setupKeepAliver(router) {
    router.beforeEach((to, from, next) => {
        if (to.meta.keepAlive) {
            console.log('keepAliver')
            const { add } = useKeepAliverStore()
            add(to.name)
        }
        next()
    })
}

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
import { useKeepAliverStore } from '@/store/modules/keepAliver'
const { caches } = storeToRefs(useKeepAliverStore())
</script>
<template>
    <router-view v-slot="{ Component, route }">
        <keep-alive :include="caches">
            <component
                :is="Component"
                v-if="route.meta.keepAlive"
                :key="route.name"
            />
        </keep-alive>
        <component
            :is="Component"
            v-if="!route.meta.keepAlive"
            :key="route.name"
        />
    </router-view>
</template>