一、keep-alive 路由缓存在本项目中的实现说明
1. keep-alive 的作用与项目应用场景
keep-alive 是 Vue 的内置组件，用于缓存被包裹的动态组件或路由组件，避免重复渲染和数据丢失。常用于表单、列表、tab页等场景，提升页面切换的性能和用户体验。
在本项目（如 web-admin），比如后台管理的新闻列表、产品列表、表单编辑页等，适合用 keep-alive 缓存，避免切换路由时数据丢失或重新请求。
2. 项目中 keep-alive 路由缓存的实现方法
以 web-admin/src/App.vue 为例，通常这样实现：
<template>
<router-view v-slot="{ Component, route }">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 需要缓存的页面组件名
const cachedViews = ref(['NewsList', 'ProductList', 'UserList'])
</script>
说明：
:include指定只缓存部分页面（如新闻列表、产品列表等）。- 组件名需与页面组件的
name属性一致，如export default { name: 'NewsList' }。
二、问题
1. 问：你在项目中是如何实现路由缓存的？为什么要用 keep-alive？
答：
在本项目（如 web-admin），我在 App.vue 用 <keep-alive :include="cachedViews"> 包裹 <router-view>，只缓存新闻列表、产品列表等页面。这样切换到详情页再返回时，列表页不会重新渲染和请求，提升了性能和用户体验。
2. 问：keep-alive 的 include 和 exclude 有什么作用？项目中如何配置？
答：
include 用于指定需要缓存的组件名，exclude 指定不缓存的组件名。项目中通过 include 只缓存高频切换的列表页，避免缓存过多页面导致内存占用。组件名需与页面组件的 name 属性一致。
3. 问：keep-alive 缓存的页面如何刷新？项目中有遇到相关需求吗？
答：
可以通过修改 key 或动态调整 include，让 keep-alive 重新渲染页面。项目中在编辑或删除数据后，需要刷新列表页时，会临时移除组件名再加回来，强制刷新缓存，保证数据一致性。
4. 问：keep-alive 如何与路由懒加载配合使用？项目中有实践吗？
答：
keep-alive 可以和路由懒加载一起用，懒加载只影响首次加载，keep-alive 缓存后切换回来无需重新加载。项目中所有路由组件都用懒加载，配合 keep-alive 缓存高频页面，兼顾了性能和体验。
5. 问：keep-alive 在实际开发中遇到过哪些问题？你是如何解决的？
答：
遇到过组件名不一致导致缓存失效、缓存过多导致内存占用高等问题。为此，项目中统一为页面组件设置 name，只缓存必要页面，并在需要时手动清除缓存，保证了缓存的有效性和性能。
