本文介绍了Ant Design Pro的菜单与路由组织方式，强调了将菜单配置（menuData）与路由配置（routerConfig）分离的好处。通过示例展示了如何生成完整路径并解释了routerConfig的结构设计，便于路由组件的生成和菜单配置的合并。文章还提到了动态导入组件的优化方法以及在组件中注入路由数据的技巧。
最近一周读了ant-design-pro的部分源码，重点关注了整个项目的路由组织部分，很受启发，小小总结一下，欢迎斧正。
1.menu菜单
//菜单项的基本格式
const menuData = [
{
name: 'dashboard',
icon: 'dashboard',
path: 'dashboard',
children: [{
name: '分析页',
path: 'analysis',
}, {
name: '监控页',
path: 'monitor',
}, {
name: '工作台',
path: 'workplace'
}]
},
...
]
这里的菜单path属性配置对用户特别友好，只需要写当前模块的path名称即可，完整path路径会由formatter函数生成：
//递归生成完整path路径
function formatter(data, parentPath = '', parentAuthority) {
return data.map((item, index) => {
const child = item.children;
const path = `${parentPath}/${item.pa
最低0.47元/天 解锁文章
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
