「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

前言

本文介绍的是在做微前端 single-spa 项目过程中，遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题。

项目情况：single-spa 项目，基座用的是 React，目前是2个子应用一个 Vue 一个 React。路由方案是 Vue Router，React Router + history。

有交互场景是从 Vue 子应用跳转到 React 子应用，或者从 React 子应用跳转到 Vue 子应用，因此遇到了问题。

遇到的问题

结合项目诉求和遇到的问题，大家可以先思考一下有什么解决方案~

------------------------------分割线------------------------------

解决的方案

主要是要处理好以下2个因素：

• 正常触发当前页面的路由钩子
• 正常传路由参数到目的页面
  我一开始尝试去查阅社区文章和看部分源码，看是否有什么特殊方式自主去触发路由钩子，等钩子处理完成之后再跳转去目的页面（跳去 Vue 用 Vue Router，跳去 React 用 React Router）

但看源码下来发现，想要触发 Prompt 还是需要调用 history.push 触发流程，想要触发 Vue Router 导航守卫还是需要调用 VueRouter.push 触发流程

所以结合这两点我整出了解决方案，已使用在项目