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 管理共享状态，配合缓存策略实现最佳效果。