如何实现可控制销毁的keepAlive组件详解？

本文共计1759个文字，预计阅读时间需要8分钟。

目录 + 简介 + 思路 + 在 Routes 中添加 keepAlive 缓存标识 + 创建 app-router-view 组件 + 使用 router-view 中的 v-slot 标签 + :is 标识实现手动清除页面缓存 + 定义组件命名方法 + 配置好路由 name 与组件 name 的对应关系

目录

• 简介
• 思路
• 在 Routes 中添加 keepAlive 缓存标识
• 创建 app-router-view 组件
• router-view 中的 v-slot
• 标签里的 :is
• 实现手动清除页面缓存
• 定义组件名的方法
• 配置好路由 name 与组件 name 对应关系
• 在 pinia 或者 vuex 中定义好操作缓存列表的方法
• 添加路由守卫，在页面进入时维护缓存列表
• 调整组件，维护好 include

简介

关于 Vue 的 KeepAlive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时 缓存 被移除的组件实例

我们可以利用这一特性来解决当路由切换时页面组件被销毁的问题，常见的业务场景有表单缓存，列表缓存定位，返回时保持状态等，网上有很多教程涉及，但是对如何自主控制缓存的组件销毁这一块大多讲的不是很清晰。