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

2次阅读

共计 2302 个字符，预计需要花费 6 分钟才能阅读完成。

最近在做我的项目重构的事件，原来的一个 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 文件的问题。