动态加载子应用路由：Umi + qiankun 的优雅方案

2023-11-24 23:30:46

导言

微前端架构的兴起，带来了跨团队、跨业务的应用开发新范式。然而，在微前端体系中，子应用间的路由管理往往面临着复杂性和灵活性方面的挑战。本文将探讨如何使用 Umi 和 qiankun 框架，巧妙地实现子应用路由的动态加载，为微前端开发提供一个优雅的解决方案。

Umi 和 qiankun 简介

Umi 是一个用于构建企业级前端应用的框架，它提供了丰富的功能和插件，简化了复杂项目的开发。qiankun 是一个微前端解决方案，允许将多个独立的子应用集成到一个父应用中。

动态加载子应用路由

在传统微前端架构中，子应用的路由通常在父应用中静态定义。然而，这种方式缺乏灵活性，无法根据实际需求动态加载子应用路由。

借助 Umi 和 qiankun 的强大功能，我们可以实现子应用路由的动态加载。具体步骤如下：

在父应用中注册子应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#app1',
    activeRule: '/app1',
  },
  // 其他子应用配置
]);
start();

在子应用中定义路由：

import { createRoutes } from 'umi';

export default createRoutes([
  {
    path: '/',
    component: 'Home',
  },
  // 其他路由配置
]);

在父应用中动态加载子应用路由：

const dynamicRoutes = [];

for (const app of microApps) {
  const routes = app.routes;
  dynamicRoutes.push.apply(dynamicRoutes, routes);
}

const newRoutes = [
  ...originalRoutes,
  ...dynamicRoutes,
];

更新父应用的路由配置：

router.config({
  routes: newRoutes,
});

通过这种方式，父应用可以根据需要动态加载和添加子应用的路由，从而实现路由配置的灵活性。

解决路由多次添加问题

在传统微前端架构中，每次加载子应用时，其路由都会添加到父应用的路由配置中，导致路由重复添加的问题。为了解决这一问题，可以在动态加载子应用路由时进行路由合并，避免重复添加。

路由动态配置

动态加载子应用路由后，父应用可以动态配置路由，根据实际需求进行添加、删除或修改。例如，可以根据用户权限或业务需求，动态调整子应用的可用路由。

示例代码

// 父应用中的路由动态配置
const updateRoutes = (routes) => {
  router.config({
    routes,
  });
};

// 动态添加子应用路由
const addSubAppRoutes = (app) => {
  const routes = app.routes;
  updateRoutes([...router.config().routes, ...routes]);
};

// 动态删除子应用路由
const removeSubAppRoutes = (app) => {
  const routes = app.routes;
  const newRoutes = router.config().routes.filter((route) => {
    return !routes.some((r) => r.path === route.path);
  });
  updateRoutes(newRoutes);
};