一、获取首个子应用

通过 window 的 location 可以知道当前路由的相关信息 用 location 的 pathname 在 配置的子应用列表中，过滤出相关子应用的配置

• 在 main/micro/utils/index.js 中，定义 currentApp 获取当前子应用方法

  import { getList } from '../constant/subApps'
  
  /**
    * 获取当前的子应用
    */
    export const currentApp = () => {
        const currentUrl = window.location.pathname
        return filterApp('activeRule', currentUrl)
    }
  
   /**
    * 过滤子应用列表
    * @param key
    * @param value
    * @return {*[]}
    */
    const filterApp = (key, value) => {
        const currentApp = getList().filter(item => item[key] === value)
        return currentApp && currentApp.length ? currentApp[0] : {}
    }

• 在 main/src/utils/index.js 中的 registerApp 调用 start(), 启动微前端框架

  import { registerMicroApps, start } from '../../micro'
  
  export const registerApp = (list) => {
      // 注册到微前端框架里
      registerMicroApps(list)
      // 启动微前端框架
      start()
  }

• 在 main/micro/index.js 中，暴露出 start 方法

  export { registerMicroApps, start } from './start'

• 在 main/micro/start.js 中，定义 start 方法

    /**
     * 启动微前端框架
     */
    export const start = () => {
        // 1. 验证当前子应用列表是否为空
        const apps = getList()
        if (!apps.length) {
            // 子应用列表为空
            throw Error('子应用列表为空，请正确注册')
        }
  
      // 有子应用的内容，查找到符合当前路由的子应用内容
      const app = currentApp()
      if (app) {
          const { pathname, hash } = window.location
          const url = `${pathname}${hash}`
          window.history.pushState('', '', url)
          window.__CURRENT_SUB_APP__ = app.activeRule
      }
  }

• 在路由拦截的时候，重写了 window.history.pushState 和 window.history.replaceState, 导致每次路由切换的时候，会执行两次，解决方案如下：

  • 在 main/micro/start.js 中，定义 start 方法，添加 window.__CURRENT_SUB_APP__ 属性

    ...
      if (app) {
          const { pathname, hash } = window.location
          const url = `${pathname}${hash}`
          window.history.pushState('', '', url)
          window.__CURRENT_SUB_APP__ = app.activeRule
      }

  • main/micro/utils/index.js 中添加 isTurnChild 判断子应用是否切换

    /**
     * 子应用是否做了切换
     */
      export const isTurnChild = () => {
          if (window.__CURRENT_SUB_APP__ === window.location.pathname) {
              return false
          };
          return true
      }

  • 在 main/micro/router/routerHandle.js 中的 turnApp 调用

    import { isTurnChild } from '../utils'
    
    export const turnApp = () => {
        if (isTurnChild()) {
            console.log('路由切换了')
        }
    }