关于前端:Umi-qiankun-实现动态加载子应用路由

前言

  最近在做我的项目重构的事件，原来的一个Vue我的项目有几十个菜单，我的项目大的令人发指，所以筹备重构，应用了umi+qiankun的形式，子利用应用了vue和react两个类型的框架。

需要

  因为用到了umi框架，默认的路由文件对立配置在config/routers上面，并且是动态的，然而因为当初是动静增加的子利用，如果应用动态的路由文件，每次新加一个子利用，就须要批改一次主利用中的路由文件再公布一次，显著感觉不合理。因而找了一个解决动静路由的办法，也是官网的解决方案。配置的形式次要是在运行时进行，官网文件见https://umijs.org/zh-CN/docs/runtime-config

配置

• 第一步：获取子利用配置列表
    因为波及应用到微利用的配置形式，所以首先是在app.ts中调用接口获取微利用的信息列表

  // 前面须要应用
  let globalApp: any[] = [];
  // 获取微利用信息列表
  export const qiankun = getApps().then((data) => {
    const apps = data?.DATA.filter((i: { entry: any }) => i.entry) || [];
  
    const tmp = apps?.map((app: any) => {
        return {
            ...app,
            // 减少一些子利用须要用到变量
            props: {
                globalState: {
                    ...initState,
                },
            },
        };
    });
    globalApp = tmp;
    return {
        apps: tmp,
    };
  });
  
  // 返回的数据结构
  const response = [
    {
        enrty: 'https://10.10.10.10:111',
        name: 'microApp1'
    },
    {
        enrty: 'https://10.10.10.10:222',
        name: 'microApp2'
    }
  ];

• 第二步：在app.ts中增加路由配置
    同样还是在app.ts中，增加patchRoutes配置，这个次要性能是为了动静减少新的路由，次要性能也是利用这个实现的，具体代码如下。这里的extraRoutes是提前定义好的变量，用于存储从接口拿到的数据，forEach外面的router[0]这些是依据本人的路由配置，找到具体要增加新的路由的地位，并塞进去一个路由配置。

  let extraRoutes: object[] = [];
  export function patchRoutes({ routes }: any) {
    extraRoutes.forEach((element: any) => {
        routes[0].routes[2].routes[0].routes.unshift({
            name: element.name,
            path: element.path,
            component: dynamic({
                loader: () =>
                    import(
                        /* webpackChunkName: 'layouts__MicroAppLayout' */ '@/layouts/MicroAppLayout'
                    ),
                loading: LoadingComponent,
            }),
        });
    });
  }

• 第三步：新增一个微利用组件
    下面第二步中咱们新减少一个路由的时候应用到了component字段，原本如果应用动态路由形式的话，咱们能够在config/routes中能够间接增加一条动态路由如{name: 'microApp3', path: '/microApp3', microApp: 'microApp3'}这样子，然而应用动静形式时却不能间接push这么一条，会不失效，所以须要应用component的形式，因而这里应用了<MicroApp></MicroApp>的形式增加的。
    咱们在layouts文件夹上面新建一个文件名称叫MicroAppLayout.tsx，内容如下，相当于把它封装成了一个组件，并通过dynamic动静引入，name也会通过props主动传入，这样咱们会在第二步中循环获取到的子利用列表将element.name传入进去即可。

  import React from 'react';
  import { MicroApp } from 'umi';
  
  const MicroAppLayout: React.FC = (props: any) => {
    return (
        <>
            <MicroApp name={props?.route?.name} />
        </>
    );
  };
  export default MicroAppLayout;

• 第四步：渲染新的路由
    通过以上的形式，咱们就曾经动静的将路由配置进行了更新，并且适配了微利用，接下来只须要从新render一下就好了，在app.ts中增加如下代码，globalApp就是下面通过接口获取到的微利用列表，map之后赋值给extraRoutes，再通过oldRender从新渲染即可。

  export function render(oldRender: () => void) {
    extraRoutes = globalApp?.map((app: any) => {
        return {
            name: app.name,
            path: '/' + app.name,
        };
    });
    oldRender();
  }

  总结

    通过以上的形式，咱们就能依据后端的返回接口，动静的增加路由了，本地的路由配置文件只须要配置一些主利用罕用的并且简直不会变动的路由即可。当然不光是微利用能够应用这种形式，如果有需要的话一般的路由也能够应用这种形式进行配置，这也就省去了咱们每次新加一个菜单就要更新一遍routers文件的问题。

参考

https://blog.csdn.net/BLUE_JU…