微应用中嵌入微应用问题记录

129 阅读1分钟

场景: Devops(React) 作为基座,Devops-Agile(React) 作为微应用接入 Devops, Test-Platform (Vue)作为微应用接入 Devops-agile .

遇到的问题:

1、Devops-agile 和 Test-Platform 都用 registerApp 注册,然后 start,会存在注册和加载的时候 Test-Platform container 不存在的情况导致加载失败。主要表现在停留在流量回放页面,直接切换系统(均不含敏捷的测试菜单)的时候。

image.png 解决方案:用 loadMicroApp 的方式代替 registerApp 。

2、进入 Test-Platform 微应用后,切换别的菜单都提示 404 。

解决方案:去掉 vue 微应用中的路由通配符匹配机制。

image.png 3、从 Test-Platform 页面,点击菜单,不同菜单表现不一样,有的正常跳转,有的作为路由 url 拼接到了微应用的当前 url 后面,且本地调试是正常,部署到环境后会捕获到从子应用离开的最后一次路由跳转。

image.png 尝试方案:

解决方案:

查看 Test-Platform 路由守卫代码逻辑,发现主应用里正常跳转和不正常跳转的走到不同的路由守卫逻辑里面。因此,在路由守卫里,加条件跳过监听跳转到其他应用的路由,本应用的路由正常走路由守卫逻辑。

image.png