vue如何实现路由缓存

Vue 路由缓存的实现方法

在 Vue 项目中，可以通过 keep-alive 组件和路由配置实现页面缓存，避免重复渲染和提升性能。

使用 keep-alive 包裹路由视图

在 App.vue 或父组件中，用 keep-alive 包裹 <router-view>，缓存所有匹配的路由组件：

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

按需缓存特定路由

通过 include 或 exclude 属性指定需要缓存的组件名（需与组件 name 选项一致）：

<keep-alive include="Home,Profile">
  <router-view />
</keep-alive>

或排除特定组件：

<keep-alive exclude="Login">
  <router-view />
</keep-alive>

结合路由元信息动态缓存

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

// router.js
routes: [
  {
    path: '/home',
    component: Home,
    meta: { keepAlive: true }
  }
]

动态控制缓存：

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

缓存的生命周期钩子

被缓存的组件会触发 activated 和 deactivated 钩子，可用于数据刷新：

export default {
  activated() {
    // 组件被激活时调用
    this.fetchData();
  },
  deactivated() {
    // 组件被停用时调用
  }
}

滚动行为保持

在路由配置中启用 scrollBehavior 保存滚动位置：

const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    return { x: 0, y: 0 };
  }
});

注意事项

• 组件必须设置 name 选项才能被 include/exclude 匹配。
• 动态路由参数变化时，默认会复用组件实例，可通过监听 $route 或使用 key 强制更新。
• 过度缓存可能导致内存占用过高，需合理设计缓存策略。