微前端的使用和注意事项 - qiankun

一、为什么使用微前端

• 微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。
• 微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
• 微前端的核心价值在于 "技术栈无关”。

二、使用方式

• https://qiankun.umijs.org/zh/guide/getting-started

三、主应用和微应用间通信

可参考：https://juejin.cn/post/6844904151231496200

• qiankun 官方提供的通信方式

Actions 通信。

• 使用Vuex进行状态管理

在做微前端集成时，将主应用的store共享给所有微应用

1. 主应用向微应用传递store实例

registerMicroApps(
      [
          {
              name: "chai-project",
              entry: "//localhost:8080",
              container: '#yourContainer',
              activeRule: "/chaiQiankunTest/ffff",
              props: {
                store //共享主应用的store实例
              }
          }
      ],
      {
          beforeLoad: [
              app => {
                  console.log("before load", app);
              }
          ], // 挂载前回调
          beforeMount: [
              app => {
                  console.log("before mount", app);
              }
          ], // 挂载后回调
          afterUnmount: [
              app => {
                  console.log("after unload", app);
              }
          ] // 卸载后回调
      }
    )

2. 微应用使用主应用共享的store实例

import Vuex from 'vuex'
Vue.use(Vuex);
function render (props) {
  const store = props.store;
  // 在 render 中创建 VueRouter，可以保证在卸载微应用时，移除 location 事件监听，防止事件污染
  router = new Router({
    // 运行在主应用中时，添加路由命名空间 /chaiQiankunTest/ffff
    base: window.__POWERED_BY_QIANKUN__ ? 'chaiQiankunTest/ffff' : '/',
    mode: 'history',
    routes
  });

  // 挂载应用
  instance = new Vue({
    router,
    store,//主应用共享的store实例
    render: (h) => h(App)
  }).$mount('#app');
}

四、注意事项

• 微应用之间如何跳转

微应用之间的跳转，或者微应用跳主应用页面，直接使用微应用的路由实例是不行的，如 react-router 的 Link 组件或 vue 的 router-link，原因是微应用的路由实例跳转都基于路由的 base。

有以下几种办法可以跳转：

1. history.pushState()
2. 直接使用原生 a 标签写完整地址

<a href="http://localhost:8080/app1">app1</a>

3. 修改 location href 跳转

window.location.href = 'http://localhost:8080/app1'