Vue3 Keep-alive include 失效问题

<template>
  <div class="app-main">
    <router-view v-slot="{ Component }">
    <keep-alive :include="includeList ">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  </div>
</template>
 
<script setup>
import { defineComponent, watch, ref, KeepAlive } from "vue";
import { useRoute } from "vue-router";
const includeList = ref([]);
const route = useRoute();

watch(
 () => route,
 (newVal) => {
   if (newVal.meta.keepAlive &&includeList.value.indexOf(newVal.name) === -1) {
          includeList.value.push(newVal.name);
     }
  },
 { deep: true }
); // 开启深度监听
</script>

这里书写是没有问题的,但是不起作用

vue3的setup无法组件命名，keep-alive include必须要组件命名

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

解决办法(在页面组件中添加name,命名组件)

<script>//vue3支持多个script标签 可在添加一个新的script标签命名组件
export default {name: 'Name'}
</script>