修改 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中,重定向到404
const isInMenu = checkPathExists();
if (!isInMenu) history.push("/404");
}
},