基本結構

** 腳手架通過結合一些配置檔案、基本演算法及工具函式，搭建好了路由和選單的基本框架，主要涉及以下幾個模組/功能：**

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 方法實現。

2. 如果你的專案並不需要選單，你可以直接在 BasicLayout 中刪除 SiderMenu 元件的掛載。
    
   

3. 並在 src/layouts/BasicLayout 中 設定 const MenuData = []。
4. 如果你需要從伺服器請求選單，可以將如果你需要從伺服器請求選單，可以將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"},
…
},
會自動生成相關的路由及導航