Vue3.0 script setup如何设置name进行页面缓存

vue3.0之后使用script setup无法定义name属性，目前暂时实现了2个方案

1、手动给路由Component添加name

slot传回来的Component官网没给类型，跟vnode很像

此方法获取在路由定义的name属性，不需要在页面定义name属性

<template>
  <router-view v-slot="{ Component, route }">
    <KeepAlive :include="includes">
      <component
        :is="handleComponent(Component, route)"
        :key="route.fullPath"
      ></component>
    </KeepAlive>
  </router-view>
</template>
<script setup lang="ts">
import { RouteRecordNormalized, RouteRecordName } from "vue-router";

const includes = ["home", "about"];

const handleComponent = (
  component: Record<"type", { name: RouteRecordName | undefined }>,
  route: RouteRecordNormalized
) => {
  if (component) component.type.name = route.name;

  return component;
};
</script>

2、插件vite-plugin-vue-setup-extend

早看到有插件就不折腾了