1.约定式路由

即文件路由，根据文件名自动配置；

1.1 基础路由

即自动生成的路由配置

例如pages目录如下：

1
2
3
4
5
6
7
8
9
10
// 基础路由
pages
	user
		index.js
   	index.js
 umi会自动生成路由：
 [
 {path: '/', component: './pages/index.js'},
 {path:'/user/', component: './pages/user/index.js'}
 ]

1.2 动态路由

即带有$前缀的目录或文件生成的路由配置

例如pages如下：

1
2
3
4
5
6
7
8
9
10
11
pages
	$user
	   index.js
     $id.js
     index.js
   umi生成路由：
  [
    {path: '/', component: './pages/index.js'}
    {path:'/:user/', component: './pages/$user/index.js'}
    {path: '/:id', component: './pages/$id.js'}
  ]

1.3 可选的动态路由

umi 里约定动态路由如果带 $ 后缀，则为可选动态路由。对象路由里面可选路由用？表示

例如pages如下：

1
2
3
4
5
6
7
8
pages 
  user
  	$id$.js
  	index.js
  	[
  		{path:'/', component: './pages/index.js'}
  		{path: '/user/:id?', component: './pages/user/$id$.js'}
  	]

1.4 嵌套路由

umi 里约定目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout。对象路由里面嵌套路由写在routes里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
pages 
	user
		_layout.js
		$id.js
		index.js
    [
       {
       		path: '/user', component: './pages/user/_layout.js',
               routes: [
                   {path: '/', component: './pages/user/index.js'},
                   {path: '/user:id', component: './pages/user/$id.js'}
               ]
       }
    ]

2. 编译时配置式路由

编译时配置式路由，可以配置 .umirc.(ts|js) 或者config/config.(ts|js) 配置文件中的 routes 属性；如果配置了这个文件，则会使约定式路由无效，即不会对 src/pages 目录做约定式的解析

2.1 config.js路由配置

<1>path参数: 这个就为一个路由路径。默认情况下，访问子路由的时候，会把父路由的所有组件也同时加载出来。 类型：string
如，一个路由{ path: ‘/‘, component: ‘@/layouts/basic’,routes:[{path: ‘/user’,component:’./content/content’}] }
这时候如果输入路由 /user, 页面中会同时加载组件basic和组件content
<2>component参数: 这个是和前面的路由路径对应的组件路径，即切换到对应的路由，就会显示这个对应的组件。component 默认是相对于 src/pages 目录的。但是也可以用@来进行指定，@目录依然代表src目录。 类型：string
<3>routes参数: 表示子路由的所有配置，里面的依然是所有的路由对象
<4>redirect参数: 表示重定向路由。值为一个path路径。即，访问该路由的时候，重定向到指定路由
{ exact: true, path: ‘/‘, redirect: ‘/list’ }。即访问路由/的时候，重定向到路由/list
<5>exact参数: 表示是否精准匹配。加了这个属性，访问子路由的时候，就不会把父路由的组件也同时加载出来了，而只会加载子路由的组件。 类型：boolean，默认值：false
如，一个路由{ path: ‘/‘, component: ‘@/layouts/basic’,routes:[{path: ‘/user’,component:’./content/content’,exact: true}] }
这时候如果输入路由 /user, 页面中只会加载content组件
<6>title参数：配置路由的标题

2.2 路由组件参数

在组件的props上面可以获取到的参数
match，当前路由和 url match 后的对象，包含 params(这个params就是动态路由的时候，获取传入的那个值)、path、url 和 isExact 属性
location，表示应用当前出于哪个位置，包含 pathname、search、query 等属性。这个参数没用，直接用window.location,就和这个是一样的了
history，同 api#history 接口
route，当前路由配置，包含 path、exact、component、routes 等

2.3 权限路由

umi 的权限路由是通过编译时配置式路由的 Routes 属性来实现，在routes下的对象里设置authority属性即可；

umi默认使用的是Browser History， 使用hash需要在config.js里配置

1
export default {history: 'hash',}

3.运行时配置式路由

运行时配置式路由，就是指src 目录下的 app.js 中的路由配置。这个就相当于是在配置vue中的全局的钩子函数。即组件里面在执行一些操作的时候，就会先触发这里面的一些函数****

3.1 patchRoutes函数

作用： 修改路由当前页面中的路由

  • routes: Array，config/config.js中的全部路由配置,修改了这个routes参数，就相当于修改了全局的路由配置,
  • 使用场景：<1>和 render 配合使用，请求服务端根据响应动态更新路由。<2>修改全部路由，加上某个前缀
1
2
3
4
5
6
export function patchRoutes(routes) {
  Object.keys(authRoutes).map(authKey =>
    ergodicRoutes(routes, authKey, authRoutes[authKey].authority)
  );
  window.g_routes = routes;
}

3.2 render函数

作用： render生命周期执行前调用此函数，可在渲染应用前做权限校验

1
2
3
4
5
6
7
8
9
10
11
12
import router from 'umi/router' // umi2
import history from 'umi'  // umi3以后
export function render(oldRender) {
 fetch('/api/auth').then(auth => {
    if (auth.isLogin) { oldRender() }
    else { 
         history.push('/home');  // umi3以后
        // router.push('/home')  umi2
    } 
  });

}

3.3 onRouterChange函数

作用： 在初始加载和路由切换时触发

参数如下：

  • location: Object，history 提供的 location 对象
  • routes: Array，路由配置
  • action: PUSH|POP|REPLACE|undefined，初次加载时为 undefined

使用场景：埋点统计。初次加载时也会执行，但 action 为 undefined

3.4 rootContainer函数

用于封装 root container，可以取一部分，或者外面套一层，等等,参数如下

  • container: ReactComponent，React 应用最上层的根组件
  • 使用场景：dva、intl 等需要在外层有个 Provider 的场景

3.4 modifyRouteProps函数

用于修改传给路由组件的 props,参数如下

  • props: Object，原始 props
  • Object: 里面有个route属性，表示当前路由配置
  • 使用场景：需返回新的 props

4. 路由跳转

4.1 标签跳转

基于 umi/link，通常作为 React 组件使用。就是说用<link>标签进行跳转

1
2
import Link from 'umi/link';
export default () => (<Link to="/list">Go to list page</Link>);

4.2 函数跳转

基于 umi/router，通常在事件处理中被调用。就是说函数式跳转，一般不用这个，在umi 3.0中已经被废弃，而是用下面那个history跳转。更多跳转方法，见 https://umijs.org/zh/api/#umi-router。但是**使用这个history的时候，有时候会报错 history为undefined，所以这个时候需要用withRouter()()这个高阶组件来包裹当前组件**

4.3 props.history.push(params):

这个push()函数的params参数，可以为一个字符串也可以为一个对象。
参数为字符串：为字符串的时候，就代表要跳转的目标路由路径
参数为对象：为对象的时候，就可以 给目标路由传参了

参数如下：

pathname属性：表示要跳转的目标路由路径。 类型：string
query属性：表示要传给目标路由的参数。不过参数会被放到地址栏。 类型：object
state属性：也是传给目标路由的参数。参数是加密的，不会放到地址栏。 类型：object
组件中获取传过来的路由参数：如果是query传过来的对象参数，就用this.props.location.query(默认为{}); 如果是state传过来的对象参数，就用this.props.location.state(默认为undefined);

注： window的location对象改变路由实现跳转：location.pathname = '/user/list',这种方法可以是可以，不过就是切换路由的速度太慢了。在可以用上面方法的情况下，不推荐使用

5 Module Processor

1
2
3
4
5
6
7
.js, .jsx, .mjs, .jsx, .json: 由 babel-loader 处理
.ts: 由 ts-loader 处理
.graphql, .gql: 由 graphql-tag/loader 处理
.css, .less, .sass: 由 css-loader, postcss-loader, less-loader 处理
.svg: 由 @svgr/core 处理。使用 umi，你可以用如下方式引入 svg
import { ReactComponent as Avatar } from './avatar.svg'
function Example() {return <Avatar />}

————————————————
转载至：https://blog.csdn.net/rocktanga/article/details/122907867