什么是 Vue 路由缓存？
Vue 路由缓存是通过 Vue 的内置组件 <keep-alive> 实现的，它可以缓存组件的状态和 DOM 节点，避免在组件切换时销毁并重新创建组件。当应用中存在频繁切换的页面或需要保存表单、滚动等状态时，使用路由缓存可以显著提高应用性能并提升用户体验。
在实际场景中，路由缓存允许开发者对某些路由页面进行缓存，而不是每次切换时都重新加载数据或重新渲染页面。
为什么需要路由缓存？
- 提升性能：缓存页面可以避免组件重复加载数据和重新渲染，减少不必要的网络请求和计算。
- 状态保存：某些页面（如表单页、滚动页面等）需要保存当前的状态，缓存可以防止状态丢失。
- 优化用户体验：避免页面频繁切换导致的卡顿或页面刷新，提供更加流畅的用户体验。
Vue 路由缓存的核心概念
Vue 路由缓存依赖 <keep-alive> 组件来实现。<keep-alive> 是 Vue 的一个抽象组件，可以缓存活动组件的状态。它通过缓存已经渲染的组件来避免重复渲染和销毁，从而提升应用性能。
基础使用：路由缓存的实现
在 Vue 中，要实现路由缓存非常简单。只需要将路由视图 <router-view> 包裹在 <keep-alive> 组件中即可：
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
通过这种方式，所有的路由组件都会被缓存。当你从一个路由跳转到另一个路由时，之前的路由组件不会被销毁，而是保持其状态。
控制缓存的组件
有时候，我们可能只希望缓存特定的路由页面，而不是所有页面。可以通过 <keep-alive> 的 include 和 exclude 属性来控制需要缓存的组件。
使用 include 缓存指定组件
include 接受一个字符串或正则表达式，表示需要缓存的组件名称。
<keep-alive include="Home,About">
<router-view />
</keep-alive>
在这个示例中，只有 Home 和 About 路由组件会被缓存，其他路由组件不会被缓存。
使用 exclude 排除不缓存的组件
exclude 和 include 类似，它接受一个字符串或正则表达式，用来排除不需要缓存的组件。
<keep-alive exclude="Login">
<router-view />
</keep-alive>
在这个示例中，所有路由组件都会被缓存，除了 Login 组件。
动态组件名称匹配
要确保缓存正确生效，组件名称必须正确设置。在 Vue 中，组件的名称通过 name 属性定义：
export default {
name: 'Home'
};
路由缓存与参数
当路由组件的参数发生变化时（例如通过不同的 ID 访问同一组件），默认情况下，<keep-alive> 缓存的组件不会重新渲染。为了处理这种情况，你可以通过观察 $route 对象来手动更新组件。
<template>
<div>
<h1>当前ID：{{ id }}</h1>
</div>
</template>
<script>
export default {
computed: {
id() {
return this.$route.params.id;
}
},
watch: {
$route(to, from) {
if (to.params.id !== from.params.id) {
// 手动更新组件逻辑
this.fetchData();
}
}
},
methods: {
fetchData() {
// 请求新数据
}
}
};
</script>
在这个示例中，当路由参数 id 发生变化时，watch 会监听 $route 的变化并触发 fetchData 方法来请求新数据。
路由组件的生命周期
当使用 <keep-alive> 时，路由组件的生命周期钩子会有所变化：
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
});
接着，在主组件中使用 <keep-alive> 并结合 include 和 exclude 控制缓存：
<template>
<div id="app">
<keep-alive include="Home,About" exclude="Login">
<router-view />
</keep-alive>
</div>
</template>
这样 Home 和 About 页面会被缓存，而 Login 页面不会缓存。
切换时清除缓存
有时候我们希望在特定情况下清除缓存，例如在用户退出登录时，需要销毁某些路由的缓存。可以通过 $refs 来手动清除缓存的组件：
<template>
<div id="app">
<keep-alive ref="keepAlive">
<router-view />
</keep-alive>
<button @click="clearCache">清除缓存</button>
</div>
</template>
<script>
export default {
methods: {
clearCache() {
this.$refs.keepAlive.cache = {};
this.$refs.keepAlive.keys = [];
}
}
};
</script>
通过这种方式，你可以在特定场景下手动清除路由组件的缓存。
总结
通过使用 Vue 路由缓存，可以显著提升应用的性能和用户体验。使用 <keep-alive> 组件能够轻松地缓存需要的路由页面，减少重复渲染和状态丢失。通过 include 和 exclude 属性，我们可以精确控制哪些路由组件需要缓存，哪些不需要缓存。此外，结合组件的 activated 和 deactivated 生命周期钩子，我们可以在组件激活和缓存时执行特定的逻辑，从而实现更加灵活的状态管理和性能优化。
通过掌握路由缓存的使用方法，开发者可以有效提升 Vue.js 应用的效率，尤其是在处理大型应用时，缓存策略能够大幅减少不必要的资源消耗。