微前端如何无刷新跳转？

• 基于 URL 路径匹配的路由分发（最主流的方式）
  • 注意不能使用window.location.href
  • 就是主应用劫持url路径，然后匹配到对应的子应用即可。
    • 微前端框架会劫持、代理、重写浏览器的的路由和方法。

追问

• 在你的微前端方案中，子应用自己的路由系统是如何配置的？（考察 basename 的配置）

  • 每个子应用都有自己的前缀。然后在主应用中，每个子应用的路径都不一样，当输入路径的时候，会直接匹配到对应的子应用。
  • basename的作用是跳转时自动带上前缀和跳转后在url上面自动忽略前缀。
    • 所以你在url跳转的时候不需要带上前缀，跳转后也看不见前缀

• 当浏览器的“后退”按钮被点击时，整个流程是怎样的？（考察对 popstate 事件监听的理解）

  • 会自动取出之前的url记录来url地址栏，然后”监听“全局的popstate，执行倒退。
  • 对于代码发起的跳转，调用了被劫持的pushState
  • 但是浏览器回退是浏览器的行为，只能监听这个事件

• 如果两个子应用都使用了 react-router-dom v6，它们各自的 history 实例会冲突吗？你的架构是如何隔离的？（考察对沙箱隔离机制的理解）

  • 不会，有沙箱。用Proxy来代理window对象。

• 在主应用切换子应用时，如何处理上一个子应用还未完成的 API 请求？（考察对请求中断、应用生命周期管理的深入思考）

  • 悬空请求，切换子应用的时候要主动卸载。

• 如果一个 URL 没有匹配到任何子应用，404 页面应该由主应用还是子应用来展示？为什么？（考察架构设计和职责划分的思考）