Vue3内置组件KeepAlive一些其他问题

最近开发的系统中有需要到将一部分路由缓存起来，系统在调用keepAlive组件的时候出现了一些问题，我的组件并不能被缓存起来，进出钩子函数也没有正常触发，翻查vue文档

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组

 <router-view v-slot="{ Component }">
            <!--            <transition :name="config.layout.mainAnimation" mode="out-in">-->
            <keep-alive :include="aliveRouterList" :max="5">
                <component :is="Component" :key="$route.name" />
            </keep-alive>
            <!--            </transition>-->
        </router-view>

这里是我系统中使用的KeepAlive代码，使用了include属性来缓存需要被keepAlive的路由名称，这时出现了个问题，我的文件夹命名方式都是文件目录是组件名称或者路由名称，里面文件使用了index.vue进行命名，在浏览器的vue-devtools可以看出keepalive了一些同名组件，文件名为Index.vue这些组件并没有被缓存。

翻查官方文档发现：

我的项目是使用了setup语法糖进行书写代码的，所以手动给该组件添加了对应的路由名字，这样keepalive就能正确识别该组件而进行缓存了。

<script lang="ts">
export default {
    name: 'routineTestDetails',
}
</script>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
</script>