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:
parent
096545c5a1
commit
17e2a02281
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user