qiankun主应用vueRouter4.x及子应用vueRouter3.x导致的问题及修正方法记录

1,045 阅读1分钟

问题描述

使用qiankun构建微前端,主应用使用vue3+vueRouter4.x。子应用使用vue2+vueRouter3.x。主应用路由模式为history,子应用路由模式为hash模式(这种路由模式对子应用改造最小,问题也相对少)。子应用挂载到主应用microApp.vue页面中,在页面中添加跳转回主应用菜单功能,使用router.push方法跳转主应用会出现跳回子应用问题,无法正常跳转。

具体问题参考 [Bug]主应用和子应用使用不同版本的vue后路由切换报错 · Issue #1361 · umijs/qiankun (github.com)

上面Issue中提到一些解决方法,部分对我当前项目无效,我的解决方法是在加载子应用页面跳转主应用使用history.replaceState(history.state, '', path)代替router.push方法 具体参考:

常见问题 - qiankun (umijs.org)

从 Vue2 迁移 | Vue Router (vuejs.org)