@exvu/umi-plugin-dynamic-route NPM

@exvu/umi-plugin-dynamic-route

实现umi2,umi3动态路由。

实现原理

通过修改routes对象，再触发render使界面刷新，让新路由生效。

安装

# or yarn
$ npm install @exvu/umi-plugin-dynamic-route --save-dev
$ yarn add @exvu/umi-plugin-dynamic-route -D

Usage

需要两个步骤开始.

1. 配置 .umirc.ts

export default defineConfig({
  dynamicRoutes: {
    routeKey:"routeKey1",//指定路由查询的搜索键
    routes:{}//各个模块的动态路由
  },
  routes: [
    {
      path: '/',
      //umi2 umi3 配置雷同
      wrappers: [
        '@/wrappers/auth'
      ],
      component: '@/layouts/BlankLayout',
      routeKey1:"home",
      routes: [
      ]
    }
  ],
});

12. 配置 app.ts

import { getDynamicRoutes, findRouteByKey } from 'umi';

export function patchDynamicRoutes({  routes, test,...options }) {
    //test 通过reloadRoutes传递的自定义参数
    
    console.log("执行patchDynamicRoutes");
    //根据key快速定位到指定节点。
    const targetRoute = findRouteByKey(routes, 'home', 'routeKey1');
    if (targetRoute) {
        //获取某个模块的路由
        const dynamicRoutes = getDynamicRoutes('test')
        if (targetRoute.route && dynamicRoutes) {
            //更新路由逻辑
            targetRoute.route.routes.splice(targetRoute.route.routes.length - 1, 0, ...dynamicRoutes)
            console.error("替换路由成功", routes)
        } else {
            console.error("未找到动态路由", dynamicRoutes)
        }

    } else {
        console.error("未找到目标路由")
    }
}

3. 在项目中使用

请求更新路由（项目任意位置调用）可以在reloadRoutes将自定义参数传递给app.ts的patchDynamicRoutes

import { patchRoutes,reloadRoutes,dynamic } from 'umi';
//更新路由
reloadRoutes({
  test:'自定义字段'
});

配置文档

属性	默认值	描述
`routeKey`	routeKey	指定路由查询的搜索键
`routes`	{}	各个模块的动态路由

函数	描述
`reloadRoutes(option?:Option[])`	请求重新路由，在更新路由之前会触发patchDynamicRoutes修改路由
`getRoutes`	获取umi的路由配置
`getDynamicRoutes(key?:string)`	获取动态路由,若传递key就获取指定模块的动态路由,否则获取全部的动态路由配置
`findRouteByKey(routes: Route[],key: string,routeKey:string)`	根据键查询路由