02. children 级子应用与 brother 级子应用

子应用级别的概念，是从 Web 管理后台的页面设计中孵化出来的。

---

常见的 Web 管理后台中，我们可以这样拆分应用：

1. Layout ：包含左侧 Menu、顶部 Header、中间 Content 和 Footer

   • children 级子应用：主体应用每一个菜单栏对应的子页面，展示在 Content 中。如首页、车辆管理等

2. brother 级子应用：因需求限制，不可以展示左侧 Menu、顶部 Header 和 Footer，与主体应用框架平级。如登录界面

代码实现上的核心区别

子应用挂载的位置不同。

• children 级子应用，挂载在 id 为 root-children 的 DOM 下，root-children 挂载的位置是主体应用框架的 Content 位置，它与 Menu/Header/Footer 一起显示；

• brother 级子应用，挂载在 id 为 root-master 的 DOM 下，root-master 挂载位置与 Layout 平级，主体应用框架不渲染。

子应用配置挂载点

所有的微前端子应用全部配置在 foundation/config/config.[env].ts，其中涉及子应用的配置是：

const subApps: MingRoute[] = [
  {
    name: 'account',
    microApp: 'account',
    entry: '/account/index.html',
    path: '/account',
    title: '账户',
    wrappers: ['@/wrappers/brother'],
  },
  {
    name: 'home',
    microApp: 'home',
    entry: '/home/index.html',
    path: '/home',
    title: '首页',
    wrappers: ['@/wrappers/children'],
  },
];

为保证不同层级的子应用被正确地渲染进不同的 DOM Container，框架约定：

1. 对于 brother 级子应用，wrappers 字段的数组应该包含 @/wrappers/brother；
2. children 级子应用的 wrappers 字段的数组应该包含 @/wrappers/children；

其他可参见 基座声明式路由。