主应用registerApp - history模式

registerApp方式加载配置 registerApp.js

导入下发实例

import router from '@/router'
import store from "../store/index";
import { initialState } from "./globalState";

const microApps = [
  /**
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 通过该地址加载微应用，这里我们使用 config 配置
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
   */
  {
    name: "sub01",
    entry: 'http://localhost:8020/',
    activeRule: "/sub01",
  },
  {
    name: "sub02",
    entry: ' http://127.0.0.1:8010/',
    activeRule: "/sub02",
  },
  {
    name: "sub03",
    entry: SUB03_MICRO_APP,
    activeRule: "/sub03",
  },
];

添加下发实例

export const filterApps = () => {
  microApps.forEach((item) => {
    // 必选，微应用的容器节点的选择器或者 Element 实例。
    item.container = "#subapp-viewport";
    // 可选，主应用需要传递给微应用的数据。
    item.props = {
      routerBase: item.activeRule, // 下发基础路由
      globalState: initialState, // 下发全局数据方法
    };
  });
  return microApps;
};

全局周期钩子

export const microConfig = {
  beforeLoad: [
    (app) => {
      console.log("%c before load", "background:#3a5ab0 ; padding: 1px; border-radius: 3px;  color: #fff", app);
    },
  ], // 预加载
  beforeMount: [
    (app) => {
      console.log("%c before mount", "background:#7d9553 ; padding: 1px; border-radius: 3px;  color: #fff", app);
    },
  ], // 挂载前回调
  afterMount: [
    (app) => {
      console.log("%c after mount", "background:#7d7453 ; padding: 1px; border-radius: 3px;  color: #fff", app);
    },
  ], // 挂载后回调
  beforeUnmount: [
    (app) => {
      console.log("%c before unmount", "background:#7dd253 ; padding: 1px; border-radius: 3px;  color: #fff", app);
    },
  ], // 卸载前回调
  afterUnmount: [
    (app) => {
      console.log("%c after unmount", "background:#d2525c ; padding: 1px; border-radius: 3px;  color: #fff", app);
    },
  ], // 卸载后回调
};

微应用注册 index.js

import { filterApps, microConfig } from "./registerApp";

export { qiankunActions } from "./globalState";

// 微应用注册
export const registerApps = () => {
  const _apps = filterApps();
  registerMicroApps(_apps, microConfig);
  start({
    prefetch: "all", // 可选，是否开启预加载，默认为 true。
    sandbox: { strictStyleIsolation: true }, // 可选，是否开启沙箱，默认为 true。// 从而确保微应用的样式不会对全局造成影响。
    singular: true, // 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 true。
  });
};

检测全局下发数据的改变

import { initGlobalState } from "qiankun";
// 定义全局下发的数据
export const initialState = {
    // 当前登录用户
    userInfo: {},
    isHavePerssion: store.getters.isHavePerssion,
    passengerId: store.getters.passengerId
};

// 初始化全局下发的数据
export const qiankunActions = initGlobalState(initialState);
// 检测全局下发数据的改变
qiankunActions.onGlobalStateChange((state) => {
    // 修改全局下发的数据
    for (const key in state) {
        if (Object.prototype.hasOwnProperty.call(state, key)) {
            const item = state[key];
            initialState[key] = item;
            if (key === "userInfo") {
                store.commit("user/UPDATE_USER_INFO", item);
                continue;
            }

        }
    }
});

路由配置

    path: "/orderSystem/*",
    name: "orderSystem",
    component: Layout,
    meta: {
        title: '订单管理系统',
        subName: "orderSystem",
        isMain: true,
        activeMenu: '/businessSystem',
        loadApp: true
    }
},