通过 iframe 的方式搭建的微前端应用，父子系统应该如何通信

最近在维护一套微前端系统，父系统使用的 ruoyi-vue，子系统用的是 umi，子系统是通过 iframe 的方式嵌入到父系统中的。

父系统

父系统采用的是动态路由，在管理后台录入页面路径和模块路径，由数据库保存，接口返回后再塞入 vue代码中实现页面的展示和跳转

当路由匹配后去 Iframe 组件

通过 iframe 标签就能够正常显示子系统里的页面了（前提域名要一致！）

子系统向父系统发送信息

目前有一个需求，就是子系统的页面想要打开父系统的页面，

子系统页面之间的跳转都是通过父系统的前面写好的路由映射

但是父系统的路由是由 ruoyi-vue 这个框架控制的呀，子系统是 umi 并没有方法去控制

所以我们用到了 postMessage 方法

onClick={() => window.parent.postMessage({ type: 'openPage', path: '/client/evaluation/detail', query: { id: record.id } }, '*')

我们点击跳转按钮之后发送了 type 和 目标路由 path 以及 路由参数 query 三个字段

父系统接收

我们可以在父系统的 main.js 或者 App.vue 里处理接收

//  App.vue
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      if (event.data && event.data.type === 'openPage') {
        this.$router.push({ path: event.data.path, query: event.data.query });
      }
    }
  },

这样父系统 ruoyi-vue 就能够正确处理路由跳转了