micro-app icon indicating copy to clipboard operation
micro-app copied to clipboard

升级1.0后,关闭虚拟路由系统,子系统路由更新渲染异常

Open hdy1023 opened this issue 2 years ago • 1 comments

问题描述

问题的具体描述 升级1.0后,子系统路由更新渲染出现问题。 主应用路由:页面A,页面B 子应用1路由:页面C,页面D 子应用2路由:页面E,页面F 升级前,主应用关闭路由keep-alive,开启微前端keep-alive 配置。主应用通过监听路由变化调用 window.history.replaceState、window.dispatchEvent(new PopStateEvent()) 实现子应用路由更新。 路由更新场景有两处: 1.子应用所在vue组件 created 时调用,确保进入子应用时根据当前url更新子应用路由; 2.子应用所在vue组件$route变化时调用,确保当前挂载的子应用内部页面跳转时更新子应用路由。 基于以上,能做到A、B、C、D、E、F页面之间无差别无感知跳转切换,交互正常。 升级1.0后并关闭了虚拟路由系统出现问题:进入子应用页面时页面无法正常渲染,当前子应用内部跳转功能正常。

复现步骤

1.怀疑是升级后子应用在keep-alive情况下,再次进入时触发路由更新的时机变了 尝试1:将路由更新方法放在 onCreated生命周期内调用,失败,与放在组件created内效果一样。 尝试2:将路由更新方法延时300毫秒执行,成功,不同子应用页面相互切换交互正常。(延时执行会带来体验不好) 这块还出现了个诡异的现象:延时执行路由更新如果小于300毫秒时,首次进入子应用1页面正常,再次进入子应用2时页面报错,关闭的虚拟路由系统被恢复了(URL变成了虚拟路由系统的规则) 2.尝试关闭keep-alive 配置,打开主应用vue keep-alive 环境,应用之间路由跳转页面渲染正常,但是应用切换触发了子应用卸载,不满足实际需求(项目为包含主应用、子应用多个页面组成的后台管理系统,有面包屑多页签的功能,所以在页签切换时需要保留打开过页面的状态)

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。 https://github.com/hdy6323989/micro-app-test

环境信息

  • micro-app版本:
  • 主子应用:vue2+vue-router3+vue-cli 路由模式:history

PS:因为公司项目已经基于0.x版本的路由系统落地了,升级版本是为了1.0新增的优化和修复;旧版本的路由url较虚拟路由系统的url比较直观清楚,但是我看新的1.0文档上好像已经移除了旧版本的路由说明,希望官方后续版本能继续兼容基于浏览器URL的路由系统。

hdy1023 avatar Sep 28 '22 07:09 hdy1023

好的,我看一下

bailicangdu avatar Sep 28 '22 07:09 bailicangdu

方便进微信群详细了解下复现步骤吗?可以群里@狗尾巴草

raoenhui avatar Nov 02 '22 07:11 raoenhui

What the hell is this? You guys just closed this issue without leaving a clue? No link to the commit which fixed the issue or to another pull request that implemented this feature?

iconben avatar Jun 30 '23 08:06 iconben

What the hell is this? You guys just closed this issue without leaving a clue? No link to the commit which fixed the issue or to another pull request that implemented this feature?

hhhhhhhhhh

panghujiajia avatar Mar 10 '24 12:03 panghujiajia