antd：动态获取菜单

本文主要是介绍antd：动态获取菜单，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

修改 app.tsx 文件

• 修改 getInitialState 方法

export async function getInitialState(): Promise<{...menuData?: MenuDataItem[] | undefined;fetchMenuList?: Promise<MenuDataItem[] | undefined>;
}> {...const fetchMenuList = async () => {const menuList = await fetchMenus();return menuList;};const menuData = await fetchMenuList();	return {...menuData,};
}

• 修改 layout

export const layout: RunTimeLayoutConfig = ({ initialState }) => {...return {...menuDataRender: () => {return initialState?.menuData;},}
}

menuData 结构

[{path: '/item',name: '一级菜单',children: [{path: '/item/detail',name: '二级菜单'，}],}
]

menuData 中只需要 path 和 name，对应的 components 需要在 routes 中配置。

路由文件 routes.ts

export default [{path: '/item',routes: [{path: '/item/detail',component: './detail',}]},
]

如果在 routes 中配置的菜单在 menuData 中没有，可以修改 app.tsx 文件的 onPageChange 方法，重定向到 404。

onPageChange: () => {const { location } = umi.history;if (initialState?.menuData?.length) {// 如果访问页面不在menuData中，重定向到404const isInMenu = checkPathExists();if (!isInMenu) history.push("/404");}
},

这篇关于antd：动态获取菜单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---