主应用页面内容布局

主页面内容包括

• 头部
• 面包屑导航
• 子应用容器
  • 加载状态
  • 子应用内容
• 底部信息

子应用注册

创建导航路由列表

• 对应子应用页面路由，方便管理路由跳转

  export const NAV_LIST = [
  {
    name: '首页',
    status: true,
    value: 0,
    url: '/vue3/#/index',
    hash: '',
  },
  {
    name: '资讯',
    status: false,
    value: 1,
    url: '/react15#/information',
  },
  {
    name: '视频',
    status: false,
    value: 2,
    url: '/react15#/video',
    hash: '',
  },
  {
    name: '选车',
    status: false,
    value: 3,
    url: '/vue3/#/select',
    hash: '',
  },
  {
    name: '新能源',
    status: false,
    value: 4,
    url: '/vue2#/energy',
    hash: '',
  },
  {
    name: '新车',
    status: false,
    value: 5,
    url: '/react16#/new-car',
    hash: '',
  },
  {
    name: '排行',
    status: false,
    value: 6,
    url: '/react16#/rank',
    hash: '',
  },
  ]

  主应用路由跳转规划

• 主应用和子应用都跳转到主应用的整体页面中

  const routes = [
  {
    path: '/',
    component: () => import('../App.vue'),
  },
  {
    path: '/react15',
    component: () => import('../App.vue'),
  },
  {
    path: '/react16',
    component: () => import('../App.vue'),
  },
  {
    path: '/vue2',
    component: () => import('../App.vue'),
  },
  {
    path: '/vue3',
    component: () => import('../App.vue'),
  },
  ];

  子应用容器

• 子应用的加载和销毁，都在子应用容器中进行

  <div class="micro-main-body-container">
    <Loading v-show="loadingStatus"></Loading>
    <!-- 子应用容器 -->
    <div id="micro-container" v-show="!loadingStatus"></div>
  </div>

  子应用注册到微前端框架

  子应用列表

• 微前端框架中，需要一个子应用列表来管理子应用,需要有以下信息

  {
  name: 'react15',// 唯一id
  entry: '//localhost:9002/',  // 子应用入口地址
  container: '#micro-container',  // 子应用渲染容器
  activeRule: '/react15',  // 激活状态
  },

• 完整子应用列表

  export const navList = [
  {
    name: 'react15',// 唯一id
    entry: '//localhost:9002/',  // 子应用入口地址
    container: '#micro-container',  // 子应用渲染容器
    activeRule: '/react15',  // 激活状态
  },
  {
    name: 'react16',
    entry: '//localhost:9003/',
    container: '#micro-container',
    activeRule: '/react16',
  },
  {
    name: 'vue2',
    entry: '//localhost:9004/',
    container: '#micro-container',
    activeRule: '/vue2',
  },
  {
    name: 'vue3',
    entry: '//localhost:9005/',
    container: '#micro-container',
    activeRule: '/vue3',
  },
  ];

  注册子应用到微前端框架

• 将子应用列表，注册到微前端框架进行管理

• main/micro/start.js

  import { setList } from './const/subApps'
  export const registerMicroApps = (appList) => {
  // window.appList = appList;
  //! 设置子应用列表
  setList(appList);
  }

• main/micro/const/subApps.js ```javascript let list = [];

export const getList = () => list export const setList = appList => list = appList ```

总结

主应用逻辑

• 主应用整理逻辑大概如下图所示

• 通过切换不同的应用路由，获取到对应的页面

• 然后通过微前端框架，将页面信息加载到子应用容器中(如果没有加载完成，显示loading页)

  子应用注册到微前端逻辑

• 大致流程如下