qiankun icon indicating copy to clipboard operation
qiankun copied to clipboard

loadMicroApp在主应用页面中多个位置加载同一个子应用的不同模块,会导致子应用被挂载多次

Open rida233 opened this issue 3 years ago • 7 comments

What happens?

我想在主应用的某个页面中不同的dom节点下加载来自同一个子应用(subApp)的不同组件,使用手动加载方法,通过vue-route的abstract模式成功加载了不同组件,但每个组件都挂载了一遍这个子应用,导致性能很差。有没有什么方式避免这种情况?

复现步骤,错误日志以及相关配置

//主应用<MicroComp.vue>组件伪代码

image

实际挂载: image subApp的bootstrap、mounted、update都被执行两次,

相关环境信息

  • qiankun 版本: 2.4.1

rida233 avatar Mar 07 '22 04:03 rida233

可以尝试下,只加载一次,然后子应用导出两个路由组件给主应用,主应用直接调用组件

gongshun avatar Mar 08 '22 01:03 gongshun

可以尝试下,只加载一次,然后子应用导出两个路由组件给主应用,主应用直接调用组件

那调用loadMicroApp时挂载到哪里呢?或者您有代码demo示例更好,谢谢!

rida233 avatar Mar 08 '22 04:03 rida233

那调用loadMicroApp时挂载到哪里呢?或者您有代码demo示例更好,谢谢!

挂载到一个隐藏的容器就行,子应用在 mount 钩子把组件通过 props 传给主应用就行了

gongshun avatar Mar 09 '22 02:03 gongshun

楼主解决了吗?可以交流下吗?最近也在做嵌套的内容,实现思路差不多,但是在微应用的加载和卸载的时机有点疑问

hello-astar avatar May 06 '23 09:05 hello-astar

have this ever solved? can we have some example code?

hanalice avatar Nov 11 '23 10:11 hanalice