vue 项目中，keep-alive 不生效

背景

给一个旧的后台管理项目，增加一个从详情页返回，不刷新页面的功能。使用 vue 的 keep-alive 组件 include 属性，但是发现不生效，页面刷新了。网上查了下，这个 include，是根据组件的 name 属性来匹配的，需要把组件的 name 属性加上去改成与 include 中的一致。顺便再复习下 keep-alive 的用法。

一、作用

keep-alive 是 Vue 提供的一个内置组件，用于缓存组件的状态，避免组件在切换时重新渲染。它通常用于路由组件的缓存，以提升用户体验。

二、属性

• include：指定需要缓存的组件名称，可以是一个字符串、正则表达式或数组。只有名称匹配的组件会被缓存。
• exclude：指定不需要缓存的组件名称，可以是一个字符串、正则表达式或数组。只有名称不匹配的组件会被缓存。
• max：指定缓存的组件数量，当缓存的组件数量超过 max 时，最早缓存的组件会被销毁。
• match：指定缓存的组件名称，可以是一个字符串、正则表达式或函数。只有名称匹配的组件会被缓存。

三、用法

1、与动态组件一起使用，缓存组件实例

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

2、与路由一起使用，缓存路由组件

<template>
  <!-- 写法一 -->
  <div>
    <keep-alive :include="['Home', 'About']">
      <router-view></router-view>
    </keep-alive>
  </div>
  <!-- 写法二 -->
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

四、钩子函数

• activated：当缓存的组件被激活时调用。

• deactivated：当缓存的组件被停用时调用。

  第一次进入：created-> mounted-> activated，退出：deactivated。

  再次进入，触发 activated（这时我们可以拿到组件的所有 data，可在此节点做一些请求更新页面数据）

注意

在路由中使用 include 属性时，需要将组件的 name 属性加上去，改成与 include 中的一致。否则，keep-alive 组件不会缓存该组件。