如何实现一个支持按需销毁缓存且具备keepAlive功能的组件？

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

目录+简介+思路+在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> 是一个内置组件，它的功能是在多个组件间动态切换时 缓存 被移除的组件实例

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