antd-design-pro项目引用微前端，使用qiankun实现动态路由加载

官网：微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。

为了方便项目开发和管理，提议引入微前端，实现独立开发独立部署，便开始了qiankun漫漫之路。

qianjun接入，注册子应用按照官网步骤来，很快就可以实现一个简单的主子应用，为了避免以后每次开发一个子项目，主项目都要打包更新的问题，所以从动态路由入手。

最开始没有搞清楚qiankun和plugin-qiankun的区别，以及对文档阅读的不细致走了很多弯路，希望接下来这篇文档对你的开发会有一些小小的帮助。

在开始这个问题之前先要搞清楚两个概念:

qiankun:

官网地址：https://qiankun.umijs.org/zh/guide/getting-started

umijs/plugin-qiankun:

官网地址：@umijs/plugin-qiankun

敲重点！！！

首先要知道qiankun和umijs/plugin-qiankun不是一种东西，前者是纯净版，后者可以理解为在前者基础上的封装，是umi脚手架下安装qiankun插件，两者是不同的接入方法。另外后者可以使用前者的注册方法。

一、qiankun具体使用：

安装：

yarn add qiankun # 或者 npm i qiankun -S

主应用接入（注册子应用）

第一种方法：约定式路由，该种方法需要在主应用内提前进行定义。（缺点：每次打包都需要更新主应用，如果不考虑动态路由可使用该方法）

入口文件中加入以下代码：app.js 或者是index.js

1.  
    
2.  
   import { registerMicroApps, start } from 'qiankun';
3.  
    
4.  
   registerMicroApps([
5.  
   {
6.  
   name: 'react app', // 子应用package.json的name值
7.  
   entry: '//localhost:7100',//子应用的访问地址
8.  
   container: '#yourContainer',//主应用容器（子应用会插入该位置）
9.  
   activeRule: '/yourActiveRule',//匹配子应用路由
10.  
    },
11.  
    {
12.  
    name: 'vue app',
13.  
    entry: { scripts: ['//localhost:7100/main.js'] },
14.  
    container: '#yourContainer2',
15.  
    activeRule: '/yourActiveRule2',
16.  
    },
17.  
    ]);
18.  
     
19.  
    start(); //启动注册微应用，必需

第二种：手动加载微应用：目前只试了在点击事件中加载微应用；该种方法必须要有主容器的容器的id，否则报错，我们项目中使用的是antd design pro，所以在主容器的标识上会报错，切换到子应用再切换会主应用自身路由的时候页面报错，这个问题还有待探讨。

该种方法可以在任意位置添加，添加后注意应用销毁

1.  
   import { loadMicroApp } from 'qiankun';
2.  
    
3.  
   loadMicroApp({
4.  
   name: 'app',//子应用package.json的name值，必填
5.  
   entry: '//localhost:7100',//子应用入口地址，必填
6.  
   container: '#yourContainer',//主应用容器（子应用会插入该位置）,必填
7.  
   });

以上微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用，只需要在子应用入口文件处导出相应的生命周期钩子即可

 二、umijs/plugin-qiankun具体说明

安装

yarn add @umijs/plugin-qiankun -D

主应用接入（注册子应用）

第一种：构建期配置子应用（约定式路由）

该配置项可放到config.js配置中导出，需要在主应用中手动配置子应用，添加子应用后要及时修改主应用。

1.  
   export default {
2.  
   qiankun: {
3.  
   master: {
4.  
   // 注册子应用信息
5.  
   apps: [
6.  
   {
7.  
   name: 'app1', //子应用package.json中的name值
8.  
   entry: '//localhost:7001', // 子应用项目入口
9.  
   },
10.  
    {
11.  
    name: 'app2', // 唯一 id
12.  
    entry: '//localhost:7002', // html entry
13.  
    },
14.  
    ],
15.  
    },
16.  
    },
17.  
    };

重点来了！！！！！！！！

第二种：运行时动态配置子应用（src/app.ts 里开启），该种方法也是我在项目中应用的，用户登录之后获取对应菜单数据，对数据进行处理，通过参数apps和routes进行菜单和路由渲染

在入口文件中添加

1.  
   // 从接口中获取子应用配置，export 出的 qiankun 变量是一个 promise
2.  
   // 应用到项目后可替换成自己的接口，最后把处理好的masterOption retrun出来就可以了。
3.  
    
4.  
   export const qiankun = fetch('/config').then(({ apps }) => ({
5.  
   // 注册子应用信息
6.  
   {...masterOption} //masterOption按需配置就可以了
7.  
   // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
8.  
   lifeCycles: { //主应用注册子应用的生命周曦
9.  
   afterMount: (props) => {
10.  
    console.log(props);
11.  
    },
12.  
    },
13.  
    // 支持更多的其他配置，详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
14.  
    }));

masterOption 参数要重点讲一下，看文档的时候没用注意到还有多个配置项，这个也是困扰我很久的问题，最后配置完后发现豁然开朗，同时也感叹了下文档写的.........xxx

 从而可以通过masterOption 的routes参数，实现路由的动态加载。

第三种：在路由配置中注册

同时也可以在路由文件中进行约定式配置，参数格式同以上routes保持一致

1.  
   export default {
2.  
   routes: [
3.  
   {
4.  
   path: '/',
5.  
   component: '../layouts/index.js',
6.  
   routes: [
7.  
   {
8.  
   path: '/app1',
9.  
   component: './app1/index.js',
10.  
    routes: [
11.  
    {
12.  
    path: '/app1/user',
13.  
    component: './app1/user/index.js',
14.  
    },
15.  
    // 配置微应用 app1 关联的路由
16.  
    {
17.  
    path: '/app1/project',
18.  
    microApp: 'app1',
19.  
    },
20.  
    ],
21.  
    },
22.  
    // 配置 app2 关联的路由
23.  
    {
24.  
    path: '/app2',
25.  
    microApp: 'app2'
26.  
    },
27.  
    {
28.  
    path: '/',
29.  
    component: './index.js',
30.  
    },
31.  
    ],
32.  
    },
33.  
    ],
34.  
    }

第四种：<MicroApp/>组件方式，官方建议使用这种方式来引入不带路由的子应用，可以实现任意位置挂在自己的子应用。因不符合使用场景，为尝试该种方法。

1.  
   import { MicroApp } from 'umi';
2.  
    
3.  
   export function MyPage() {
4.  
    
5.  
   return (
6.  
   <div>
7.  
   <div>
8.  
   <MicroApp name="app1" />
9.  
   </div>
10.  
    </div>
11.  
    )
12.  
    }

 注册子应用

该种方法需要在config.js中注册插件

1.  
   export default {
2.  
   qiankun: {
3.  
   slave: {},
4.  
   },
5.  
   };

生命周期：

1.  
   export const qiankun = {
2.  
   // 应用加载之前
3.  
   async bootstrap(props) {
4.  
   console.log('app1 bootstrap', props);
5.  
   },
6.  
   // 应用 render 之前触发
7.  
   async mount(props) {
8.  
   console.log('app1 mount', props);
9.  
   },
10.  
    // 应用卸载之后触发
11.  
    async unmount(props) {
12.  
    console.log('app1 unmount', props);
13.  
    },
14.  
    };

两者的生命周期函数和数据传参使用类似，这些按照文档来就比较简单一点了

=========================================================================

说点题外话

如果使用umi脚手架生成的项目，推荐两种非常实用的方法

可以在入口文件中可以使用render（）和patchRoutes() 对路由进行格式处理

1.  
   //修改路由
2.  
   //比如在最前面添加一个 /foo 路由，
3.  
    
4.  
   export function patchRoutes({ routes }) {
5.  
   routes.unshift({
6.  
   path: '/foo',
7.  
   exact: true,
8.  
   component: require('@/extraRoutes/foo').default,
9.  
   });
10.  
    }

1.  
   //渲染前做权限校验，如果用antd-design-pro也可以再access.js中做权限校验
2.  
   import { history } from 'umi';
3.  
    
4.  
   export function render(oldRender) {
5.  
   fetch('/api/auth').then(auth => {
6.  
   if (auth.isLogin) { oldRender() }
7.  
   else {
8.  
   history.push('/login');
9.  
   oldRender()
10.  
    }
11.  
    });
12.  
    }

欢迎讨论~

这篇好文章是转载于：学新通技术网