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
早看到有插件就不折腾了