keep-alive 缓存页面不生效的三种原因

原因一：页面组件没有设置 name 属性

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

<script>
export default {
  name: 'App',
};
</script>

原因二：页面组件没有设置 key 属性

<template>
  <div>
    <keep-alive>
      <router-view :key="$route.fullPath" />
    </keep-alive>
  </div>
</template>

原因三：页面组件没有设置 include 或 exclude 属性

<template>
  <div>
    <keep-alive :include="['Home', 'About']">
      <router-view />
    </keep-alive>
  </div>

  <keep-alive :exclude="['Home', 'About']">
    <router-view />
  </keep-alive>
</template>