umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.72k stars 2.01k forks source link

子应用切换导致路由错误 #1507

Closed cxn2019 closed 3 years ago

cxn2019 commented 3 years ago

主应用与子应用路由都是history模式,都是vue框架, 存在子应用1,appname为app1 子应用2,appname为app2

点击加载子应用1,路由为http://127.0.0.1:8080/app1/, 切换点击加载子应用2,路由为http://127.0.0.1:8080/app2/,但是有时会出现点击加载子应用2时,路由会变成http://127.0.0.1:8080/app1/app2/***,导致加载失败,会把上次应用的前缀拼接上

子应用都是动态添加,所以会动态调用注册应用的api

gongshun commented 3 years ago

你用什么跳转的路由?主应用的路由实例?

cxn2019 commented 3 years ago

子应用跳转加载使用的是window.history.push({}, null, '**'),切换到主应用路由就是this.$router.push('**'),使用主应用实例跳转

cxn2019 commented 3 years ago

上面更正下,window.history.pushState({}, null, '****'),即使更换调用主路由实例this.$router.push也是会出现同样问题,

github-actions[bot] commented 3 years ago

Hello @cxn2019. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.

你好 @cxn2019, 为了方便定位和排查问题,我们需要你提供一个重现实例,请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples,并上传到你的 GitHub 仓库。

cxn2019 commented 3 years ago

老师你好,复现demo已上传https://github.com/cxn2019/Project.git 启动主子应用后,先切换子应用,刷新下,在切换回主应用路由,在回到刚才的子应用,即可复现,辛苦老师了

cxn2019 commented 3 years ago

老师你好,有进展吗

gongshun commented 3 years ago

子应用的路由实例每次都需要销毁重建https://github.com/cxn2019/Project/blob/197320b6304e210b44c0c0870275d0daadb75371/sub-app/src/main.js#L22。

参考 https://github.com/umijs/qiankun/blob/972872f5fe62ca87b6911fbe8c62b389ac65f9c5/examples/vue/src/main.js#L19

cxn2019 commented 3 years ago

好的,辛苦老师了

github-actions[bot] commented 3 years ago

Since the issue was labeled with Need Reproduction, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply. 由于该 issue 被标记为需要可复现步骤,却 30 天未收到回应。现关闭 issue,若有任何问题,可评论回复。

YFAnt commented 1 year ago

@gongshun 您好, 我现在在 vue 主应用 + umi2子应用也出现了这个问题, 如何在 umi2 销毁初始化路由呢,万分感谢🙏

gongshun commented 1 year ago

@gongshun 您好, 我现在在 vue 主应用 + umi2子应用也出现了这个问题, 如何在 umi2 销毁初始化路由呢,万分感谢🙏

没有代码猜不出来问题,能否提供一个复现demo

YFAnt commented 1 year ago

@gongshun 我接入了一个开源的 代码有点多 here 多切换几次就会出现 ,劳烦您帮忙看下

gongshun commented 1 year ago

@gongshun 我接入了一个开源的 代码有点多 here 多切换几次就会出现 ,劳烦您帮忙看下

子应用的配置里面加一个shouldNotModifyDefaultBase: true 看下

https://github.com/YFAnt/test/blob/3d3824c04a938188cd149042b983663b4bf5d115/jetlinks-ui-antd-1.3.0/config/config.ts#L17

YFAnt commented 1 year ago

@gongshun 没有效果, 还是会报错

YFAnt commented 1 year ago

@gongshun 您好,我发现当切换不成功的时候,例如 由 /a 切换为/b的时候, umi-history 里面的 createBrowserHistory.js 里面的 push 方法执行了一次,这个 里面有个参数 path,我打印了一下 还是之前的/a, 我怀疑他先切换了/b 然后又执行了/a 然后就出现了/b/a的情况

YFAnt commented 1 year ago

@gongshun 你好,因为我 umi没咋用过, 我在这个地方加了一个补丁,增加了一个 判断

image

虽然没解决这个地方为啥会被调用, 但是这样能解决我上面的问题