qiankun中使用不同版本的vue-router导致冲突(主应用vue3子应用vue2路由跳转出错)
qiankun主应用vue3 子应用vue2 子应用切换路由后主应用路由无法跳转
·
现象描述
操作步骤
1.点击子应用对应的路由(app-sub-vue2)
2.点击子应用的其他路由(About)
3.点击主应用其他路由(Home)
- 主应用信息
- vue@^3.0.0、vue-router@^4.0.0
- 子应用信息
- vue@^2.6.11、vue-router@^3.2.0
出现问题的原因
vue-router 3.x
与vue-router 4.x
设置的history.state
的数据结构不同
低版本的 vue-router
在 pushState 的时候,会覆盖丢失主路由的 history.state
,导致主路由跳转异常
解决方案
主应用监听router.beforEach
手动修改history.state
数据结构
import _ from "lodash"
router.beforeEach((to, from, next) => {
if (_.isEmpty(history.state.current)) {
_.assign(history.state, { current: from.fullPath });
}
next();
});
相关参考
更多推荐
已为社区贡献5条内容
所有评论(0)