基本结构

** 脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：**

1. 路由管理 通过约定的语法根据在 router.config.js 中配置路由。

2. 菜单生成 根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。

3. 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。

路由

目前脚手架中所有的路由都通过 router.config.js 来统一管理，在 umi 的配置中我们增加了一些参数，如 name,icon,hideChildrenInMenu,authority，来辅助生成菜单。其中：

1. name 和 icon分别代表生成菜单项的文本和图标。

2. hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。

3. hideInMenu 可以在菜单中不展示这个路由，包括子路由。效果可以查看 exception/trigger页面。

4. authority用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。

菜单

1. 菜单根据 router.config.js 生成，具体逻辑在 src/models/menu.js 中的 formatter 方法实现。

如果你的项目并不需要菜单，你可以直接在 BasicLayout 中删除 SiderMenu 组件的挂载。

1. 并在 src/layouts/BasicLayout 中 设置 const MenuData = []。

2. 如果你需要从服务器请求菜单，可以将如果你需要从服务器请求菜单，可以将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"},
…
},

会自动生成相关的路由及导航