vue实现页面缓存
Vue 实现页面缓存的常用方法
使用 <keep-alive> 组件
<keep-alive> 是 Vue 内置组件，用于缓存动态组件或路由组件。通过包裹需要缓存的组件，可以保留组件状态避免重复渲染。
<template>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</template>路由配置中添加 meta 字段：
{
path: '/detail',
component: Detail,
meta: { keepAlive: true }
}结合路由守卫控制缓存
通过路由守卫动态控制哪些页面需要缓存：
router.beforeEach((to, from, next) => {
if (from.meta.keepAlive) {
// 缓存特定页面逻辑
}
next()
})使用 include/exclude 属性
精确控制哪些组件需要缓存：
<keep-alive :include="['Home', 'Profile']">
<router-view></router-view>
</keep-alive>组件生命周期钩子
被缓存的组件会触发特定生命周期：
activated：组件被激活时调用deactivated：组件被停用时调用
export default {
activated() {
// 恢复数据或重新请求
},
deactivated() {
// 保存滚动位置等状态
}
}动态缓存策略
根据业务需求动态修改缓存：
this.$route.meta.keepAlive = false
this.$nextTick(() => {
this.$router.push('/new-route')
})注意事项
- 缓存过多可能导致内存占用过高
- 表单页面缓存可能导致数据状态异常
- 滚动位置需要手动保存恢复
- 动态数据可能需要手动刷新
对于复杂场景，可结合 Vuex 或 Pinia 管理共享状态，配合缓存策略实现最佳效果。
