vue实现页面缓存

Vue实现页面缓存的常见方法

使用<keep-alive>组件

<keep-alive>是Vue内置组件，用于缓存不活动的组件实例。在路由出口处包裹<keep-alive>可缓存路由组件：

<keep-alive>
  <router-view></router-view>
</keep-alive>

通过include和exclude属性可指定缓存规则：

<keep-alive :include="['Home', 'About']">
  <router-view></router-view>
</keep-alive>

配置路由元信息

在路由配置中通过meta字段标记需要缓存的页面：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { keepAlive: true }
  }
]

动态控制缓存：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

使用生命周期钩子

被缓存的组件会触发特定生命周期：

• activated：组件被激活时调用
• deactivated：组件被停用时调用

export default {
  activated() {
    // 恢复滚动位置等操作
  },
  deactivated() {
    // 保存滚动位置等操作
  }
}

动态缓存策略

结合Vuex或Pinia实现动态缓存控制：

// 在路由守卫中动态设置meta
router.beforeEach((to, from, next) => {
  to.meta.keepAlive = store.state.cacheList.includes(to.name)
  next()
})

注意事项

• 缓存过多组件可能导致内存问题
• 表单数据会被保留，需手动重置
• 滚动位置需自行处理
• 组件名称需与include/exclude匹配