antd vue1.xx 在wujie 微前端单例模式下message弹出问题解决

问题描述

在 wujie 单例模式下，子应用加载完毕后，点击按钮可以正常弹出 antd vue 的 message 提示。但切换到其他子应用后，再次返回并点击相同按钮时，message 无法弹出且无任何响应。

antd vue版本：ant-design-vue 1.6.2

问题解析（个人猜测）

antd vue 的 message 组件在首次调用时，会创建一个 class="ant-message" 的 div 并修改全局状态，之后再调用时不会重复创建这个 DOM 元素。但当 wujie 切换子应用后，可能会销毁这个 div，但是全局状态未变，无法重新创建创建class="ant-message" 的 div，导致后续 message 无法正常弹出。

在单例模式下，子应用的 js 只会运行一次，在第一次执行message方法后渲染会挂载到子应用的 body 上面，但是当子应用发生切换再次切换回来，会将上一次渲染的dom全部都丢弃，导致 class="ant-message" 的 div 丢失，从而消息提示渲染不出来

解决方法

每次在子应用卸载生命周期中销毁message

 <WujieVue      width="100%"      height="100%"      :sync="false"      :exec="false"      :after-mount="afterMount"      :after-unmount="afterUnmount"      :plugins="renderPlugins()"    />



    afterUnmount (appWindow) {      appWindow.$message.destroy()    },