在《Umi 小白紀實(一)》中有提到過簡單的路由配置和使用，但這只是冰山一角

借用一句廣告詞，Umi 路由的能量，超乎你的想象

一、基本用法

Umi 的路由根結點是全局 layout??src/layouts/index.js

路由會將相應的頁面組件映射到上面的 props.children 中

之前的文章介紹過，Umi 的路由可以通過.umirc.js文件中的 routes 字段配置

但配置 routes 字段后，約定式路由不會生效。如果項目較重，就需要配置很多路由，所以我更傾向于使用約定式路由

Umi 可以基于 pages 目錄下的結構，自動生成路由配置，這就是約定式路由

比如上圖的目錄結構，最終會被 Umi 解析為

[

{ path:'/', component: './pages/index.jsx'},

{ path:'/users/', component: './pages/user/index.jsx'},

{ path:'/users/list', component: './pages/user/detail/index.jsx'},

]

二、動態路由

假如有某一個表單頁，需要區分新增(add)和編輯(edit)兩種狀態，這時候就可以采用動態路由

umi 里約定，帶 $ 前綴的目錄或文件為動態路由

然后在對應的組件中，通過props.match.params來獲取路由中的動態參數

再來一個需求：假如有一個 tab 菜單頁，進入該頁面時可以指定某個菜單，如果沒有指定則展示第一個菜單

這時候就可以使用可選的動態路由，umi 里約定帶 $ 后綴的動態路由為可選動態路由

然后同樣通過props.match.params?來獲取動態參數

這樣訪問?/user/:id/list?和?/user/list?都能訪問到該頁面

三、嵌套路由

umi 約定目錄下有 _layout.js 時會生成嵌套路由，以_layout.js 為該路由的根結點

如上圖的結構，在訪問?/user/detail/count/?和?/user/detail/info/?的時候都會以?_layout.js?生成二級路由

但在切換子路由，當前的滾動條并不會變化，如果希望切換子組件之后回到頂部，可以在?_layout.js?的?componentDidUpdate 中添加相應的邏輯

componentDidUpdate(prevProps) {if (this.props.location !==prevProps.location) {

window.scrollTo(0, 0);

}

}

PS: _layout.js 也可以是 _layout.jsx，上面的全局 layout 同理

四、通過 yaml 注釋擴展路由

以上其實都是一些基本的路由功能，雖然以約定目錄的方式實現了這么完善的路由功能還是很令人贊嘆，但還稱不上“震驚”二字

真正讓我佩服到五體投地的東西，從這里開始...

約定式路由雖然能節省冗雜的路由配置，但也不如直接配置routes來的靈活

Umi 的解決方案是，通過 yaml 注釋來擴展約定式路由的功能

Umi 約定路由文件的首個注釋如果包含 yaml 格式的配置，則會被用于擴展路由

比如修改頁面的 title，可以直接通過添加 yaml 注釋搞定

所有 routes 字段可以配置的參數，都可以通過注釋來擴展

這個功能為完善路由組件的功能提供了基礎，比如權限路由

如果項目需要校驗權限，比如用戶是否登錄，只需在需要校驗權限的組件頂部添加注釋

/**

* Routes:

* - ./src/routes/private.jsx*/

這樣一來，當前組件就會作為子組件嵌套在 private.jsx 中

然后在?private.jsx 中添加校驗權限的邏輯

五、基于路由的按需加載

約定式路由結合注釋之后，就會生成完整的路由配置，可以在頁面組件上通過props.route.routes獲取到

再結合其它插件就可以實現面包屑、切換動效等，這些就功能不展開說了。

但 Umi 還在看不見的地方，利用路由做了很多優化，比如按需加載

//.umirc.js

export default{

plugins: [

['umi-plugin-react', {

dynamicImport:true,

}],

],

};

對于開發人員來說，只需要添加以上配置就能開啟按需加載

開啟之后，假如有 1000 個頁面，調試時只要調其中的 5 個頁面，最終就會只編譯這 5 個頁面

而 Umi 是如何做到的呢？他們使用了臨時文件來占位

在訪問 url 的時候，只會加載當前的組件，其它路由組件都用 Loading 組件占位

雖然有些取巧，但簡單有效

路由還有一些正在完善的功能，比如 keep-alive、AntD+路由自動生成菜單，最新的進展可以關注 Umi 的官方倉庫

總結

以上是生活随笔為你收集整理的umi权限路由_Umi 小白纪实（三）—— 震惊！路由竟然如此强大！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。