UMI动态路由

umi4.0动态路由配置详解

最新推荐文章于 2025-10-12 04:38:56 发布

原创最新推荐文章于 2025-10-12 04:38:56 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了umi框架4.0中动态路由的两种配置方法。第一种是通过app.tsx中的patchClientRoutes和render函数获取后端数据来配置路由。第二种是在预先配置所有路由的基础上，在src/app.tsx的getInitialState和src/access.ts中处理权限。动态路由配置涉及到接口请求和权限验证的结合。

基于umi4.0，动态路由是运行时配置，官网文档

动态路由的两种配置方式

第一种

配置项里面的routes字段不能为空，可以先配置几个公共的路由
在app.tsx里面设置两个函数 patchClientRoutes和render，并export出去

render函数是用来请求后端数据，拿到对应的路由。这个函数会接收一个参数，也是一个函数，在接口请求完成后执行下就可以
接着会执行patchClientRoutes这个函数，这个函数会接收一个参数，里面有routes路由这个字段，把后端返回的数据整理下，放到routes里面，就配置好了动态路由

第二种

配置项里面把所有路由都写好，注意要加上权限字段

export const routes = [
  {
  	name: '权限测试',
    path: '/pageA',
    component: 'PageA',
    access: 'canReadPageA', // 权限定义返回值的某个 key
  },
];

在src/app.tsx里面需要有getInitialState这个函数

umi约定了在src/access.ts文件里定义权限

// src/access.ts 
export default function (initialState) {
  // router 是上面getInitialState函数返回的
  const { router } = initialState;
  
 // 这里接口返回的路由数据和本地配置好的路由对比下，看哪些页面有权限
 ···········

 // 需要返回一个对象，key就是上面路由配置的 access 字段的值
  return {
    canReadPageA: true, // 值是true或者false ，
    //canReadPageA: ()=>false, // 是一个函数也行，函数返回一个布尔值
  };
}