vue-element-admin解决二级菜单目录的KeepAlive缓存问题（切换页面多次重复调用接口)

Vue-element-admin是一个基于Vue.js的企业级管理框架，它集成了一些常用的功能组件，如路由守卫、权限控制等。当涉及到二级菜单的动态加载和保持状态的问题时，可能会遇到数据缓存不足导致页面刷新后重复请求接口的情况。

要解决这个问题，特别是在涉及`<keep-alive>`组件的情况下，可以采用以下策略：

1. **配置KeepAlive**: 在`<router-view>`标签外包裹一个`<keep-alive>`标签，指定需要缓存的组件。例如：

   <keep-alive :include="cachedComponents">
     <router-view></router-view>
   </keep-alive>

然后通过JavaScript动态设置`cachedComponents`数组，只缓存包含二级菜单内容的组件。

2. **Vuex状态管理**: 使用Vuex将菜单状态存储起来，当用户导航到新的页面时，检查之前打开的菜单是否还在当前路径下。如果是，则从store中读取已缓存的数据，而不是再次请求接口。

3. **生命周期钩子优化**: 在组件的`beforeRouteLeave`钩子里，判断目标路由是否匹配当前缓存的菜单项。如果不匹配，手动清除缓存的数据，防止不必要的接口调用。

4. **懒加载策略**: 只有在真正访问的时候才加载对应的接口数据，对于未访问过的菜单项，避免预加载。