案例

举例路由配置如下：

export const Layout = () => import("@/layout/index.vue")
const componentsRouter = {
  path: '/code',
  component: Layout,
  redirect: 'noRedirect',
  name: 'Code',
  meta: {
    title: '',
    permi: [''],
    icon: ''
  },
  children: [
    {
      path: 'flow',
      component: () => import(''),
      name: 'Flow',
      meta: {
        title: '',
        permi: [''],
        keepAlive: true,
        icon: ''
      }
    }
  ]
}
export default componentsRouter

appMain中配置keepalive的代码：

<script setup lang="ts">
</script>

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <transition name="router-fade" mode="out-in">
        <keep-alive :include="['Flow']">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
</template>

当单页面组件name为Flow时，正常应该启用keepalive功能。但实际keepAlive功能失效

解决方法

参考官方文档中keepalive部分的信息，KeepAlive 默认会缓存内部的所有组件实例会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

当前vue3项目为选项式API时，可以通过以下方式在页面组件中需要添加 name。

<script lang="ts">
export default {
  name: 'User'
}
</script>

但是如此一来就不能使用setup语法糖了，既然都用了vue3，得用起来啊！

TIP
在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。

检查自己项目的vue版本是否在3.2.34以上，如果是的话直接修改文件名字即可。如本文案例，将文件名称修改为Flow.vue，keepalive生效。

如果vue版本低于3.2.34，可以尝试以下方式：

<script setup lang="ts" name="Flow">
</script>