ant design pro （三）路由和選單

路由和選單是組織起乙個應用的關鍵骨架，我們的腳手架提供了一些基本的工具及模板，幫助你更方便的搭建自己的路由/選單。

注意：我們的腳手架依賴dva@2，路由方面是基於react-router@4的實現，在寫法以及 api 上與之前的版本有較大不同，所以，在開始前你需要具備一些相關的基礎知識。這裡給出幾篇關鍵文件：

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

簡單介紹下各個模組的基本思路。

目前在腳手架中，除了頂層路由，其餘路由列表都是自動生成，其中最關鍵的就是中心化配置檔案src/common/router.js，它的主要作用有兩個：

這樣我們得到乙個基本的路由資訊物件，它的結構大致是這樣：

'/dashboard/monitor': ,

'/dashboard/workplace': ,

}

為了幫助自動生成路由，在src/utils/utils.js中提供了工具函式 getroutes，它接收兩個引數：當前路由的 match 路徑及路由資訊 routerdata，主要完成兩個工作：

經過 getroutes 處理之後的路由資料就可直接用於生成路由列表：

// src/layouts/basiclayout.js
getroutes(match.path, routerdata).map(item => (
))

注意：如果你不需要自動生成路由，也可以用 routerdata 自行處理。

選單資訊配置在src/common/menu.js中，它的作用是：

如果你的專案並不需要選單，你也可以直接在src/common/router.js中配置 name 資訊。

配置檔案輸出的選單資料，可以直接提供給側邊欄元件使用。sidermenu.js。除了生成選單，選單資料還可輔助生成重定向路由等模組，參考 basiclayout.js#l154。

之前提到的路由資訊 routerdata 可以直接傳遞給 pageheader 元件用以生成麵包屑，你可以用 props 或者 context 的方式進行傳遞。腳手架裡的示例。

如果你的頁面可以利用這兩種布局，那麼只需要在路由及選單配置中增加一條即可：

1》增加路由配置

// src/common/router.js

'/dashboard/test': ,

2》選單配置

// src/common/menu.js
const menudata = [, , , ],
}, ];

加好後，會預設生成相關的路由及導航。

如果提供的布局不能滿足你的要求，就需要自己新建 layout 模板了。假設有兩個新的頁面需要使用新模板，你需要先配置好路由及選單：

1》路由設定

// src/common/router.js

'/new': ,

'/new/page1': ,

'/new/page2': ,

2》選單設定

// src/common/menu.js
const menudata = [, ],
}, ];

在根路由中增加這組新模板：

// src/router.js
} />
} />
} />

然後在你的新模板中，仿照src/layouts/basiclayout.js或src/layouts/userlayout.js生成路由列表即可。

腳手架預設支援帶引數的路由、選單及麵包屑配置，直接在路由的 key 以及選單中的 path 配置即可：

1》路由

// src/common/router.js

'/dashboard/:workplace': ,

'/:list/table-list': ,

2》選單

// src/common/menu.js
const menudata = [, , ],
}, , ];

有時在當前 layout 下還需要巢狀其他布局，例如有幾個頁面都需要展示同乙個模組，你可以把這部分提煉出來變成乙個新的布局，再到該布局下生成路由列表。與新增布局模板的區別，只是不需要將它增加到根路由中。具體可以參照src/common/router.js/list/search 相關配置，及相關元件檔案。

腳手架預設使用工具函式 getroutes 對 routerdata 進行處理，然後生成路由列表，根據基本演算法，在每一級元件中只會渲染當前 match.path 下最鄰近的路由，所以，如果你要實現巢狀路由的同級展示（如：將/list/search和/list/search/projects在同乙個地方渲染），就需要手動獲取該路由的資料並新增在合適的地方。

同時在巢狀 layout 的檔案中去掉這一條路由（如果還有下層路由需要 render）。

如果需要隱藏某條選單項，可以在該條資料中增加 hideinmenu 引數。

hideinmenu: true,  // 隱藏該條，或隱藏該組

如需隱藏麵包屑中的某個層級，可以增加 hideinbreadcrumb 屬性。

// src/common/router.js

'/dashboard/analysis': ,

'/dashboard/monitor': ,

import dynamic from 'dva/dynamic';
// eslint-disable-next-line no-underscore-dangle
// add routerdata prop
component: () => );
},});import dynamic from 'dva/dynamic';
// eslint-disable-next-line no-underscore-dangle
// add routerdata prop
component: () => );
},});

為了**的簡潔性，我們對dva/dynamic進行了二次封裝，需要注意的是這裡使用了 webpack code splitting 的動態import，dva的dynamic方法已經幫我們封裝好了promise動態載入的相關事宜，所以我們只需要直接使用即可。

ant design pro （三）路由和選單

Vue admin工作整理（三）路由

MVC框架的封裝（三）路由類

MVC框架的封裝（三）路由類

ant design pro （三）路由和選單

Vue admin工作整理（三） 路由

MVC框架的封裝（三）路由類

MVC框架的封裝（三）路由類

相關推薦

Vue admin工作整理（三）路由