Vue 3中的 路由守卫：全面解析与使用教程
什么是 Vue 路由缓存？
Vue 路由缓存是通过 Vue 的内置组件
在实际场景中，路由缓存允许开发者对某些路由页面进行缓存，而不是每次切换时都重新加载数据或重新渲染页面。
为什么需要路由缓存？
- 提升性能：缓存页面可以避免组件重复加载数据和重新渲染，减少不必要的网络请求和计算。
- 状态保存：某些页面（如表单页、滚动页面等）需要保存当前的状态，缓存可以防止状态丢失。
- 优化用户体验：避免页面频繁切换导致的卡顿或页面刷新，提供更加流畅的用户体验。
Vue 路由缓存的核心概念
Vue 路由缓存依赖
基础使用：路由缓存的实现
在 Vue 中，要实现路由缓存非常简单。只需要将路由视图
通过这种方式，所有的路由组件都会被缓存。当你从一个路由跳转到另一个路由时，之前的路由组件不会被销毁，而是保持其状态。
控制缓存的组件
有时候，我们可能只希望缓存特定的路由页面，而不是所有页面。可以通过 include 和 exclude 属性来控制需要缓存的组件。
使用 include 缓存指定组件
include 接受一个字符串或正则表达式，表示需要缓存的组件名称。
在这个示例中，只有 Home 和 About 路由组件会被缓存，其他路由组件不会被缓存。
使用 exclude 排除不缓存的组件
exclude 和 include 类似，它接受一个字符串或正则表达式，用来排除不需要缓存的组件。
在这个示例中，所有路由组件都会被缓存，除了 Login 组件。
动态组件名称匹配
要确保缓存正确生效，组件名称必须正确设置。在 Vue 中，组件的名称通过 name 属性定义：
export default {
name: 'Home'
};
路由缓存与参数
当路由组件的参数发生变化时（例如通过不同的 ID 访问同一组件），默认情况下，$route 对象来手动更新组件。
当前ID：{{ id }}
在这个示例中，当路由参数 id 发生变化时，watch 会监听 $route 的变化并触发 fetchData 方法来请求新数据。
路由组件的生命周期
当使用
activated：组件从缓存中激活时触发。deactivated：组件被缓存时（切换到其他路由页面）触发。
你可以在这些生命周期钩子中编写逻辑，例如在组件被激活时刷新数据。
export default {
activated() {
console.log('组件被激活');
},
deactivated() {
console.log('组件被缓存');
}
};
示例：缓存部分路由
假设我们有一个应用，有两个需要缓存的路由 Home 和 About，以及一个不需要缓存的 Login 页面。我们可以通过如下方式实现：
const routes = [
{
path: '/home',
component: () => import('@/views/Home.vue'),
name: 'Home'
},
{
path: '/about',
component: () => import('@/views/About.vue'),
name: 'About'
},
{
path: '/login',
component: () => import('@/views/Login.vue'),
name: 'Login'
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
接着，在主组件中使用 include 和 exclude 控制缓存：
这样 Home 和 About 页面会被缓存，而 Login 页面不会缓存。
切换时清除缓存
有时候我们希望在特定情况下清除缓存，例如在用户退出登录时，需要销毁某些路由的缓存。可以通过 $refs 来手动清除缓存的组件：
通过这种方式，你可以在特定场景下手动清除路由组件的缓存。
总结
通过使用 Vue 路由缓存，可以显著提升应用的性能和用户体验。使用 include 和 exclude 属性，我们可以精确控制哪些路由组件需要缓存，哪些不需要缓存。此外，结合组件的 activated 和 deactivated 生命周期钩子，我们可以在组件激活和缓存时执行特定的逻辑，从而实现更加灵活的状态管理和性能优化。
通过掌握路由缓存的使用方法，开发者可以有效提升 Vue.js 应用的效率，尤其是在处理大型应用时，缓存策略能够大幅减少不必要的资源消耗。