主界面菜单
主界面菜单主要控制主界面路由（layout/main/routes.js）的跳转，请结合主界面的路由配置文件配置菜单数据。
菜单导航的数据结构
//layout/main/menu.js
const menuData = [
{
name: '首页',
icon: 'dashboard',
path: 'dashboard'
},
{
name: '表单',
icon: 'form',
path: 'form',
children: [
{
name: '基础表单',
path: 'basic-form',
},
{
name: '分步表单',
path: 'step-form',
}
]
},
{
name: '表格',
icon: 'table',
path: 'table',
hideChildrenInMenu:true,
children: [
{
name: '基本表格',
path: 'basic-table',
},
{
name: '高级表格',
path: 'search-table',
},
]
},
{
name: '异常页',
icon: 'warning',
path: 'exception',
children: [
{
name: '403',
path: '403',
},
{
name: '404',
path: '404',
},
{
name: '500',
path: '500',
}
],
},
{
name: '账户',
icon: 'user',
path: 'user',
children: [
{
name: '登录',
path: 'login',
},
{
name: '注册',
path: 'register',
}
]
}
]
参数
name和icon分别代表生成菜单项的文本和图标。path跳转路由，子菜单和父级菜单的path组成完整的路由。hideChildrenInMenu用于隐藏不需要在菜单中展示的子路由。hideInMenu可以在菜单中不展示这个路由，包括子路由。authority用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示（预留）。
菜单跳转到外部地址
你可以直接将完整 url 填入 path 中。
{
name: "塞伯坦前端架构组",
path: 'https://github.com/jd-cyb',
target: '_blank', // 点击新窗口打开
}
使用菜单ICON
可以使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。如果这样还不能满足需求，可以自定义 getIcon 方法。
//layout/main/components/sider-menu/base-menu.js
// Allow menu.js config icon as string or ReactNode
// icon: 'setting',
// icon: 'http://demo.com/icon.png',
// icon: <Icon type="setting" />,
const getIcon = icon => {
if (typeof icon === 'string' && isUrl(icon)) {
return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />;
}
if (typeof icon === 'string') {
return <Icon type={icon} />;
}
return icon;
};