当前位置：首页 > VUE

vue实现路由缓存

2026-03-30 05:17:58VUE

Vue 路由缓存实现方法

使用 `<keep-alive>` 组件

在 Vue 中可以通过 <keep-alive> 组件实现路由缓存，该组件会缓存不活动的组件实例，避免重复渲染。

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive" />
  </router-view>
</template>

配置路由元信息

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

const routes = [
  {
    path: '/list',
    component: List,
    meta: { keepAlive: true }  // 需要缓存
  },
  {
    path: '/detail',
    component: Detail,
    meta: { keepAlive: false } // 不需要缓存
  }
]

动态控制缓存

通过 include/exclude 属性动态控制哪些组件需要缓存：

<keep-alive :include="cachedViews">
  <router-view></router-view>
</keep-alive>

data() {
  return {
    cachedViews: ['List', 'Dashboard']  // 组件name列表
  }
}

生命周期钩子

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

activated - 组件被激活时调用
deactivated - 组件被停用时调用

export default {
  activated() {
    // 从缓存恢复时执行
  },
  deactivated() {
    // 进入缓存时执行
  }
}

注意事项

组件必须设置唯一的 name 选项才能被正确缓存
动态路由参数变化时，相同组件实例会被复用
频繁数据更新的页面不适合缓存
缓存会占用内存，需合理控制缓存数量

清除特定缓存

通过 $destroy() 方法可以清除指定组件的缓存：

vue实现路由缓存

const instance = this.$children.find(child => child.$vnode.tag.endsWith('List'))
if (instance) {
  instance.$destroy()
}

完整示例代码

<script>
export default {
  name: 'App',
  data() {
    return {
      cachedViews: ['List']
    }
  }
}
</script>

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cachedViews">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>