基于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, // 是一个函数也行,函数返回一个布尔值 }; }