基本结构
** 脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：**
- 路由管理 通过约定的语法根据在 router.config.js 中配置路由。
- 菜单生成 根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。
- 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。
路由
目前脚手架中所有的路由都通过 router.config.js 来统一管理，在 umi 的配置中我们增加了一些参数，如 name,icon,hideChildrenInMenu,authority，来辅助生成菜单。其中：
- name 和 icon分别代表生成菜单项的文本和图标。
- hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。
- hideInMenu 可以在菜单中不展示这个路由，包括子路由。效果可以查看 exception/trigger页面。
- authority用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。
菜单
- 菜单根据 router.config.js 生成，具体逻辑在 src/models/menu.js 中的 formatter 方法实现。
-
如果你的项目并不需要菜单，你可以直接在 BasicLayout 中删除 SiderMenu 组件的挂载。 - 并在 src/layouts/BasicLayout 中 设置 const MenuData = []。
- 如果你需要从服务器请求菜单，可以将如果你需要从服务器请求菜单，可以将menuData 设置为 state，然后通过网络获取动态修改 state。
面包屑
面包屑由 PageHeaderWrapper 实现，MenuContext 将 根据 MenuData 生成的 breadcrumbNameMap 通过 props 传递给了 PageHeader，如果你要做自定义的面包屑，可以通过修改传入的 breadcrumbNameMap 来解决。
breadcrumbNameMap 示例数据如下：
{
‘/’: { path: ‘/’, redirect: ‘/dashboard/analysis’, locale: ‘menu’ },
‘/dashboard/analysis’: {
name: ‘analysis’,
component: ‘./Dashboard/Analysis’,
locale: ‘menu.dashboard.analysis’,
},
…
}
=== 示例===
1.菜单跳转
{
path: 'https://pro.ant.design/docs/getting-started-cn',
target: '_blank', // 点击新窗口打开
name: "文档",
}
2.新增页面
脚手架默认提供了两种布局模板：基础布局 - BasicLayout 以及 账户相关布局 - UserLayout：如果使用这种，很简单，如下：
// app
{
path: ‘/’,
component: ‘…/layouts/BasicLayout’,
routes: [
// dashboard
{ path: ‘/’, redirect: ‘/dashboard/analysis’ },
{ path :’/dashboard/test’,component:"./Dashboard/Test"},
…
},
会自动生成相关的路由及导航