iframe实现微应用（vue3+vite）

主应用使用iframe

 <iframe  id="mircoIframe" :src="iframeUrl" frameborder="0" name="mircoApp"
            @load="callCompanyDetail"></iframe>

主应用发送消息

// 发送消息
async function callCompanyDetail() {
 await nextTick()
 const companyDetailFrame = document.getElementById('mircoIframe').contentWindow
 companyDetailFrame.postMessage(
     {
       token: getItem(TOKEN),
       workSpaceId: getItem(WORK_SPACE).id,
       userInfo: getItem(USERRESULT)
     },
     '*'
 )
}

主应用接收消息

window.addEventListener('message', receiveMessage, false)

function receiveMessage(event: { data: any }) {
  let data = event.data
  if (data.isTokenFailure) {
    window.location.href = `${window.location.origin}/#/login?time=${new Date().getTime()}`
  }
  if (data.router) {
    setItem('router', data.router._value)
  }
}

微应用接收消息

window.addEventListener('message', receiveMessage, true)

function receiveMessage(event) {
  let data = event.data
  if (data.token) {
    setItem('token', data.token)
  }
  if (data.workSpaceId) {
    setItem('workSpaceId', data.workSpaceId)
  }

  if (data.userInfo) {
    setItem('userInfo', JSON.stringify(data.userInfo))
  }
}

微应用发送消息

window.parent.postMessage(
   {
     isTokenFailure: true
   },
   '*'
 )

当刷新的时候，需要记住微应用当前的路由，所以需要监听微应用的路由，在路由更换的时候把当前路由记下，传送给主应用，主应用保存在缓存里

微应用监听路由并发送消息到主应用

watch(
  () => router.currentRoute.value.fullPath,
  (newValue, oldValue) => {
    //主应用把token携带在路径跳转里，通过这个拿到并保存
    if (window.location.href.includes('token')) {
      window.localStorage.removeItem('leftKey')
      const href = window.location.href.split('?')[1].split('=')
      setItem(href[0], href[1])
    }
    //主应用把workSpaceId携带在路径跳转里，通过这个拿到并保存
    if (window.location.href.includes('workSpaceId')) {
      const href = window.location.href.split('?')[2].split('=')
      setItem(href[0], href[1])
    }

    if (newValue !== oldValue) {
      refreshRoute.value = newValue
      sessionStorage.setItem('refreshRoute', refreshRoute.value)
    }
    window.parent.postMessage(
      {
        router: refreshRoute
      },
      '*'
    )
  },
  { immediate: true }
)

主应用加载微应用的时候，当postMessage传输速度比微应用加载渲染慢时，微应用已经渲染完毕但主应用的数据还没有传输过去，这个时候就需要使用路由传参

主应用使用路由传参给微应用

if (getItem('router')) {
  iframeUrl = iframeUrl.value + '/#/' + getItem('router').slice(1)
} else {
  iframeUrl = iframeUrl.value + '/' + '?token=' + getItem(TOKEN) + '?workSpaceId=' + getItem(WORK_SPACE).id
}
console.log(1111, iframeUrl)

微应用通过前面的路由监听来接收主应用路由传参传过来的数据