当前位置：首页 > VUE

vue实现页面的缓存

2026-02-22 10:44:28VUE

使用 `<keep-alive>` 组件缓存页面

Vue 提供了内置组件 <keep-alive>，可以缓存动态组件或路由组件的状态，避免重复渲染。通过 include 或 exclude 属性指定需要缓存的组件名称。

<template>
  <keep-alive :include="['ComponentA', 'ComponentB']">
    <router-view></router-view>
  </keep-alive>
</template>

配置路由元信息控制缓存

在 Vue Router 中，可以通过路由的 meta 字段标记需要缓存的页面，结合 <keep-alive> 动态控制缓存。

vue实现页面的缓存

// router.js
const routes = [
  {
    path: '/pageA',
    component: PageA,
    meta: { keepAlive: true }
  },
  {
    path: '/pageB',
    component: PageB,
    meta: { keepAlive: false }
  }
];

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

利用生命周期钩子管理缓存状态

被 <keep-alive> 包裹的组件会触发特定的生命周期钩子：

vue实现页面的缓存

activated：组件被激活时调用（从缓存中恢复）
deactivated：组件被停用时调用（进入缓存）

export default {
  activated() {
    // 从缓存恢复时执行逻辑
    this.fetchData();
  },
  deactivated() {
    // 进入缓存时执行清理
    this.resetState();
  }
};

使用 `v-show` 实现局部缓存

对于非路由组件或简单场景，可以通过 v-show 切换显示/隐藏状态（DOM 保留），实现类似缓存效果。

<template>
  <div v-show="isVisible">内容区域</div>
</template>

<script>
export default {
  data() {
    return { isVisible: true }
  }
};
</script>

结合状态管理持久化数据

对于复杂数据缓存需求，可配合 Vuex 或 Pinia 将页面数据保存到状态管理库中，即使组件销毁也能恢复数据。

// 使用 Pinia 存储数据
import { defineStore } from 'pinia';

export const usePageStore = defineStore('page', {
  state: () => ({
    cachedData: null
  }),
  actions: {
    saveData(data) {
      this.cachedData = data;
    }
  }
});