vue实现路由缓存

Vue 路由缓存实现方法

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

使用 keep-alive 包裹路由视图

在根组件或布局组件中，用 keep-alive 包裹 router-view，可缓存所有匹配的路由组件：

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

按需缓存特定路由

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

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

结合路由元信息

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

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

动态判断是否使用 keep-alive：

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

缓存策略优化

对于嵌套路由，可在子路由中单独配置缓存：

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child',
      component: Child,
      meta: { keepAlive: true }
    }
  ]
}

生命周期钩子

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

• activated：进入缓存组件时触发
• deactivated：离开缓存组件时触发

export default {
  activated() {
    console.log('组件被激活');
  },
  deactivated() {
    console.log('组件被停用');
  }
}

动态修改缓存

通过 v-if 动态控制缓存：

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

注意事项

• 被缓存组件需设置 name 选项
• 过多缓存可能导致内存占用过高
• 表单内容缓存时需考虑数据更新问题
• 结合 key 属性处理相同组件不同参数的情况