15、springboot3 vue3开发平台-前端-路由构建， 使用路由守卫，加载动态路由，pinia管理路由缓存数据

### Vue3 中 `keep-alive` 实现多级路由缓存 #### 使用场景与原理说明 为了提升用户体验，在单页应用(SPA)中，当用户切换不同视图时保持某些组件的状态不失效是非常重要的。Vue 提供了 `<keep-alive>` 组件来实现这一点。对于复杂的多级嵌套路由结构而言，可以通过组合使用 `<keep-alive>`, Vuex (或 Pinia), 和自定义逻辑来达到理想的缓存效果。 #### 配置方法 在项目中的 App.vue 文件内引入并配置如下代码： ```html <template> <div id="app"> <!-- 过渡动画 --> <transition name="fade-transform" mode="out-in"> <!-- KeepAlive 包裹 RouterView --> <keep-alive :include="cachedViews"> <router-view /> </keep-alive> </transition> </div> </template> <script setup lang="ts"> import { computed } from &#39;vue&#39; import store from &#39;./store&#39; // 假设已创建好 Store 实例 // 计算属性获取缓存列表 const cachedViews = computed(() => { return store.state.tagsView.cachedViews || [] }) </script> ``` 上述模板部分展示了如何利用计算属性动态绑定 `:include` 属性到存储于 Vuex 或者其他状态管理工具内的缓存路径数组上[^1]。 接着是在 router/index.ts 定义路由规则的时候加入 meta 字段用于标记哪些页面应该被缓存: ```typescript { path: &#39;/example&#39;, component: () => import(&#39;@/views/Example&#39;), children:[ { path:&#39;child&#39;, component:() => import(&#39;@/views/example/Child&#39;), meta:{ cache:true }, // 设置此字段表示子页面也需要缓存 } ], } ``` 最后一步就是在全局守卫里处理具体的缓存策略, 如下所示： ```javascript router.beforeEach((to, from, next)=>{ const hasCache = to.matched.some(record=>record.meta.cache); if(hasCache){ let viewName = getRouteKey(to); // 自定义函数返回唯一key作为缓存依据 store.dispatch(&#39;tagsView/addCachedView&#39;,viewName); } next(); }); ``` 这里通过遍历即将进入的目标路由匹配记录(`matched`)检查是否存在带有特定元数据 (`meta.cache=true`) 的项；如果存在，则调用相应的方法更新缓存队列[^2]。 #### 注意事项 需要注意的是，以上提到的方式适合那些页面是否需要缓存不会频繁改变的应用程序。如果有更复杂的需求比如按需加载、条件性刷新等情况则可能还需要进一步优化调整方案[^3]。