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的配置中我们可以进行路由设置，插件设置等内容。
- extraPostCSSPlugins 的配置
定义额外的 PostCSS 插件，格式为数组。
举例：umi配置extraPostCSSPlugins详解http://08643.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的目录结构
.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录，基于 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二选一
|—— public //共享资源
└── src/ // 源码目录，可选
├── assets // 静态资源
├── layouts/index.js // 全局布局
├── models/global.js
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── a //按页面维度进行组织
├── index.js
├── models
├── a1.js
├── a2.js
├── services
├── a.js
├── b //按页面维度进行组织
├── index.js
├── model.js
├── service.js
├── 404.js // 404 页面
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── .umirc.js // umi 配置，同 config/config.js，二选一
├── .env // 环境变量
└── package.json
好处是更加结构更加清晰了，减少耦合，一删全删，方便 copy 和共享。
4.umi路由
umi有两种方式配置路由：
1.在umirc.js中手动配置路由
2.由umi自动生成路由配置
umi路由格式
1.基础路由
目录结构如下：
+ pages/
+ users/
- index.js
- list.js
- index.js
- 手动配置
在umirs.js中配置routes:[]:
routes:[
{ path: '/', component: './index.js' },
{ path: '/users/', component: './users/index.js' },
{ path: '/users/list', component: './users/list.js' },
]
component 是相对于 src/pages 目录的
- 自动配置
按以上结构组织文件，umi会自动生成路由。
2.动态路由
umi 里约定，带 $ 前缀的目录或文件为动态路由
目录结构
+ pages/
+ $post/
- index.js
- comments.js
+ users/
$id.js
- index.js
- 手动配置
routes:[
{path:'/',components:'/index.js'},
{path:'/users/:id',components:'/users/$id.js'},
{path:'/:post/,components:'/$post/index.js'},
{path:'/:post/comments','/$post/comments.js},
]
- 自动配置
按以上结构组织文件，umi会自动生成路由?？梢岳斫馕?就是网址中的':'
3.嵌套路由
嵌套路由可以用来做布局页面。
目录结构如下：
+ pages/
+ users/
- _layout.js
- $id.js
- index.js
以上_layout.js就是布局页面，嵌套路由的布局页面必须包含children,children即为要嵌套在布局页面中的内容。
以上_layout.js可以写成如下代码：
export default function(props) {
return (
<>
<Header />
{ props.children }
<Footer />
</>
);
}
- 手动配置
在umirs.js中配置routes:[]:
routes:[
{ path: '/users': component: './users/_layout.js'
routes: [
{ path: '/users/', component: './users/index.js' },
{ path: '/users/:id', component: './users/$id.js' },
],
},
]
- 自动配置
自动生成配置路由可以用以在umirc.js中设置需要排除的路由。
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\//,
],
},
}],
],
};
按以上结构组织文件，umi会自动生成路由。
4.权限路由
- 手动配置umirc.js的Routes来实现。
[
{ path: '/', component: './pages/index.js' },
{ path: '/list', component: './pages/list.js', Routes: ['./routes/PrivateRoute.js'] },
]
Routes中的路径是相对与umirc.js的路径。
- 自动配置权限路由
通过注释配置
比如：
+ pages/
- index.js
如果 pages/index.js 里包含：
/**
* Routes:
* - ./src/routes/PrivateRoute.js
*/
则会生成：
[
{ path: '/', component: './index.js',
title: 'Index Page',
Routes: [ ' ./src/routes/PrivateRoute.js' ],
},
]
Routes中的路径是相对与umirc.js的路径。
5.我理解的权限路由的几种实现方式
（1）通过嵌套路由实现
（2）通过权限路由实现
