路由动态缓存

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

部分业务情况下，我们想要组件能在被“切走”的时候保留它们的状态，要解决这个问题，我们需要用到 <KeepAlive> 组件。

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

在封装的框架这种提供两种方式处理缓存：

1、通过系统菜单管理配置

框架中业务路由通过系统菜单动态生成，因此在配置菜单时可选择配置是否启用缓存，启用缓存后在菜单打开后切换到其他菜单时会自动进行路由缓存。

2、业务中手动方式调用

为适应复杂的业务场景，框架封装了手动处理路由缓存的公共方法，通过引入store下的cache模块，我们可通过addCacheRoute()和removeCacheRoute()方法对路由进行缓存的添加与移除。

具体使用示例如下：

<script lang="ts" setup>
import { useCacheStore } from '@/store'
const cacheStore = useCacheStore()

// 缓存路由
cacheStore.addCacheRoute('routeName')

// 移除缓存
cacheStore.removeCacheRoute('routeName')

</script>

特别注意：

上述两种针对路由缓存的方式，最终在进行路由缓存的逻辑中，是根据路由名称进行对应，因此需要保证在路由命名时唯一且合理，框架中按照约定的方式是通过文件名称来对应路由名称。

例如:

在配置菜单时有system=>guids的一个二级菜单，对应的组件路径为system/guids/SystemGuids.vue, 如果此时启用缓存，那么最终缓存的路由名称为SystemGuids。

这里路由名称SystemGuids的是由system + guids二级菜单首字母大写拼接而成, 且路由名称和组件文件的名称保持一致。