umi+qiankun实现子应用路由动态加载

前言最近在做项目重构。最初的Vue项目有几十个菜单。项目大得令人发指，我准备重构，使用umi+qiankun，这样子应用使用了vue和react两种框架。需求因为使用了umi框架，所以默认的路由文件统一配置在config/routers下，是静态的。但是，由于是动态添加的子应用，如果使用静态路由文件，每次添加新的子应用，在主应用中修改路由文件重新发布，显然是不合理的。于是找到了动态路由的解决方案，也是官方的解决方案。配置方法主要在运行时执行。官方文档见https://umijs.org/zh-CN/docs/runtime-config配置步骤一：获取子应用配置列表由于涉及到微应用配置方法的使用，所以首先是调用app.ts中的接口获取小程序信息列表//后面需要使用letglobalApp:any[]=[];//获取小程序列表exportconstqiankun=getApps().then((data)=>{constapps=data?.DATA.filter((i:{entry:any})=>i.entry)||[];consttmp=apps?.map((app:any)=>{return{...app,//添加一些子应用需要变量props:{globalState:{...initState,},},};});globalApp=tmp;return{apps:tmp,};});//返回的数据结构constresponse=[{enrty:'https://10.10.10.10:111',name:'microApp1'},{enrty:'https://10.10.10.10:222'，名称：'microApp2'}];第二步：在app.ts中添加路由配置同样在app.ts中，添加patchRoutes配置。这个主要功能是动态添加新路由。主要功能也是用这个实现的。具体代码如下。这里的extraRoutes是一个预先定义好的变量，用来存放从接口获取的数据。forEach中的router[0]是根据自身的路由配置，找到具体位置添加新的路由，插入Routing配置。让extraRoutes:object[]=[];exportfunctionpatchRoutes({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/中添加静态路由，如{name:'microApp3',path:'/microApp3',microApp:'microApp3'}等routes中可以直接添加静态路由，但是不可以使用动态方法的时候直接push这样一个路由，是不会生效的，所以需要使用组件方法，所以这里添加了的方法。我们在布局文件夹下创建一个名为MicroAppLayout.tsx的新文件。内容如下，相当于封装成一个组件，通过dynamic动态引入。name也会通过props自动传入，所以我们将在第二步中循环得到的子应用列表传入element.name即可。importReactfrom'react';import{MicroApp}from'umi';constMicroAppLayout:React.FC=(props:any)=>{return(<>);};导出默认的MicroAppLayout;第四步：渲染新路由通过以上方法，我们已经动态更新了路由配置，适配了微应用，接下来只需要重新渲染，在app.ts中添加如下代码即可。globalApp是通过上面的接口获取到的微应用列表。地图赋值给extraRoutes后，可以通过oldRender重新渲染。exportfunctionrender(oldRender:()=>void){extraRoutes=globalApp?.map((app:any)=>{return{name:app.name,path:'/'+app.name,};});oldRender();}总结通过以上方法，我们可以根据后端的返回接口动态添加路由。本地路由配置文件只需要配置一些主应用常用的路由，几乎不会改变。当然，不仅是小程序可以使用这种方式，如果需要的话，普通的路由也可以这样配置，这样就省去了我们每次添加新菜单都要更新routers文件的问题。参考https://blog.csdn.net/BLUE_JU...