动态缓存单个页面-vue3-实现思路

状态管理定义-全局状态属性

`keepNameArray` `noKeepNameArray`  （为数组）

动态组件缓存设置

<keep-alive :include="keepNameArray" :exclude="noKeepNameArray">
    <component :is="Component"/>
</keep-alive>

该文件获取keepNameArray和noKeepNameArray并使用watch监听变化及时更新

路由文件

使用`beforeEnter`全局前置守卫动态设置keepNameArray和noKeepArray

导航守卫 | Vue Router -- 全局前置守卫

样例

path: "",
name: "componentName",
component: () => import(""),
meta: { 
    title: "",
    keepAlive: true,
},
beforeEnter:(to: any, from: any)=>{
    changeAliveViews(["componentName"]);
}


changeAliveViews(componentName){
    动态处理keepNameArray和noKeepNameArray

    将componentName放到keepNameArray中，不需要的组件name放到noKeepNameArray中
}

组件文件

通过`beforeRouteLeave`组件内的路由守卫动态设置keepNameArray和noKeepArray

导航守卫 | Vue Router - 组件内的路由守卫

样例

beforeRouteLeave: (to: any, from:any)=>{
    动态处理keepNameArray和noKeepNameArray
    
    将该组件name移除keepNameArray放到nokeepNameArray中
},