1.umi安裝
詳見這里：https://umijs.org/zh/guide/getting-started.html#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87
2.umi配置
在umi的配置中我們可以進(jìn)行路由設(shè)置，插件設(shè)置等內(nèi)容。
- extraPostCSSPlugins 的配置
定義額外的 PostCSS 插件，格式為數(shù)組。
舉例：umi配置extraPostCSSPlugins詳解http://www.itdecent.cn/p/f1f6ce592388 - alias的配置
配置 webpack 的 resolve.alias 屬性。
例如定義@表示/src
修改.umirc.js文件
import path from 'path';
export default {
alias: {
'@': path.resolve(__dirname, 'src'),
},
};
3.umi目錄
下面是umi+dva的目錄結(jié)構(gòu)
.
├── dist/ // 默認(rèn)的 build 輸出目錄
├── mock/ // mock 文件所在目錄，基于 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二選一
|—— public //共享資源
└── src/ // 源碼目錄，可選
├── assets // 靜態(tài)資源
├── layouts/index.js // 全局布局
├── models/global.js
├── pages/ // 頁(yè)面目錄，里面的文件即路由
├── .umi/ // dev 臨時(shí)目錄，需添加到 .gitignore
├── .umi-production/ // build 臨時(shí)目錄，會(huì)自動(dòng)刪除
├── a //按頁(yè)面維度進(jìn)行組織
├── index.js
├── models
├── a1.js
├── a2.js
├── services
├── a.js
├── b //按頁(yè)面維度進(jìn)行組織
├── index.js
├── model.js
├── service.js
├── 404.js // 404 頁(yè)面
├── global.css // 約定的全局樣式文件，自動(dòng)引入，也可以用 global.less
├── global.js // 可以在這里加入 polyfill
├── .umirc.js // umi 配置，同 config/config.js，二選一
├── .env // 環(huán)境變量
└── package.json
好處是更加結(jié)構(gòu)更加清晰了，減少耦合，一刪全刪，方便 copy 和共享。
4.umi路由
umi有兩種方式配置路由：
1.在umirc.js中手動(dòng)配置路由
2.由umi自動(dòng)生成路由配置
umi路由格式
1.基礎(chǔ)路由
目錄結(jié)構(gòu)如下：
+ pages/
+ users/
- index.js
- list.js
- index.js
- 手動(dòng)配置
在umirs.js中配置routes:[]:
routes:[
{ path: '/', component: './index.js' },
{ path: '/users/', component: './users/index.js' },
{ path: '/users/list', component: './users/list.js' },
]
component 是相對(duì)于 src/pages 目錄的
- 自動(dòng)配置
按以上結(jié)構(gòu)組織文件，umi會(huì)自動(dòng)生成路由。
2.動(dòng)態(tài)路由
umi 里約定，帶 $ 前綴的目錄或文件為動(dòng)態(tài)路由
目錄結(jié)構(gòu)
+ pages/
+ $post/
- index.js
- comments.js
+ users/
$id.js
- index.js
- 手動(dòng)配置
routes:[
{path:'/',components:'/index.js'},
{path:'/users/:id',components:'/users/$id.js'},
{path:'/:post/,components:'/$post/index.js'},
{path:'/:post/comments','/$post/comments.js},
]
- 自動(dòng)配置
按以上結(jié)構(gòu)組織文件，umi會(huì)自動(dòng)生成路由。可以理解為$就是網(wǎng)址中的':'
3.嵌套路由
嵌套路由可以用來(lái)做布局頁(yè)面。
目錄結(jié)構(gòu)如下：
+ pages/
+ users/
- _layout.js
- $id.js
- index.js
以上_layout.js就是布局頁(yè)面，嵌套路由的布局頁(yè)面必須包含children,children即為要嵌套在布局頁(yè)面中的內(nèi)容。
以上_layout.js可以寫成如下代碼：
export default function(props) {
return (
<>
<Header />
{ props.children }
<Footer />
</>
);
}
- 手動(dòng)配置
在umirs.js中配置routes:[]:
routes:[
{ path: '/users': component: './users/_layout.js'
routes: [
{ path: '/users/', component: './users/index.js' },
{ path: '/users/:id', component: './users/$id.js' },
],
},
]
- 自動(dòng)配置
自動(dòng)生成配置路由可以用以在umirc.js中設(shè)置需要排除的路由。
export default {
history: 'hash',
plugins: [
['umi-plugin-react', {
antd: true,
dva: true,
routes: {
exclude: [
/model\.(j|t)sx?$/,
/service\.(j|t)sx?$/,
/models\//,
/components\//,
/services\//,
],
},
}],
],
};
按以上結(jié)構(gòu)組織文件，umi會(huì)自動(dòng)生成路由。
4.權(quán)限路由
- 手動(dòng)配置umirc.js的Routes來(lái)實(shí)現(xiàn)。
[
{ path: '/', component: './pages/index.js' },
{ path: '/list', component: './pages/list.js', Routes: ['./routes/PrivateRoute.js'] },
]
Routes中的路徑是相對(duì)與umirc.js的路徑。
- 自動(dòng)配置權(quán)限路由
通過(guò)注釋配置
比如：
+ pages/
- index.js
如果 pages/index.js 里包含：
/**
* Routes:
* - ./src/routes/PrivateRoute.js
*/
則會(huì)生成：
[
{ path: '/', component: './index.js',
title: 'Index Page',
Routes: [ ' ./src/routes/PrivateRoute.js' ],
},
]
Routes中的路徑是相對(duì)與umirc.js的路徑。
5.我理解的權(quán)限路由的幾種實(shí)現(xiàn)方式
（1）通過(guò)嵌套路由實(shí)現(xiàn)
（2）通過(guò)權(quán)限路由實(shí)現(xiàn)
