feat: auto set component name for keep-alive (#5690)

* fix: auto set component name for keep-alive

* fix: type define
This commit is contained in:
Netfan 2025-03-10 16:25:30 +08:00 committed by GitHub
parent 096545c5a1
commit 17e2a02281
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,14 +1,20 @@
import type { Component, DefineComponent } from 'vue';
import type {
AccessModeType,
GenerateMenuAndRoutesOptions,
RouteRecordRaw,
} from '@vben/types';
import { defineComponent, h } from 'vue';
import {
cloneDeep,
generateMenus,
generateRoutesByBackend,
generateRoutesByFrontend,
isFunction,
isString,
mapTree,
} from '@vben/utils';
@ -81,8 +87,31 @@ async function generateRoutes(
/**
*
* 1. redirect的路由添加redirect
* 2. keep-alive的话
*/
resultRoutes = mapTree(resultRoutes, (route) => {
// 重新包装component使用与路由名称相同的name以支持keep-alive的条件缓存。
if (
route.meta?.keepAlive &&
isFunction(route.component) &&
route.name &&
isString(route.name)
) {
const originalComponent = route.component as () => Promise<{
default: Component | DefineComponent;
}>;
route.component = async () => {
const component = await originalComponent();
if (!component.default) return component;
return defineComponent({
name: route.name as string,
setup(props, { attrs, slots }) {
return () => h(component.default, { ...props, ...attrs }, slots);
},
});
};
}
// 如果有redirect或者没有子路由则直接返回
if (route.redirect || !route.children || route.children.length === 0) {
return route;