(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210460112.X (22)申请日 2022.04.28 (71)申请人 四川虹魔方网络科技有限公司 地址 621000 四川省绵阳市高新区跨 境电 子商务产业园10 栋301 (72)发明人 吴双　宋舰　黄睿葱　邓文科　 曾辉　 (74)专利代理 机构 四川省成 都市天策商标专利 事务所(有限合 伙) 51213 专利代理师 张秀敏 (51)Int.Cl. G06F 16/958(2019.01) G06F 16/955(2019.01) G06F 9/451(2018.01) (54)发明名称 一种基于乾坤微前端的全局容器动态挂载 的实现方法 (57)摘要 本发明公开了一种基于乾坤微前端的全局 容器动态 挂载的实现方法， 前端工程配置微应用 参数和自定义参数， 微应用参数包括微应用名 称、 入口地址、 容器ID和激活路径， 自定义参数是 指主应用标记； 用户登录后前端通过API接口获 取全部路由数据； 微服务基于乾坤注册微应用， 采用插槽和自定义参数的方式渲染页面完成用 户登录； 一旦URL发生变化， 则会自动触发乾坤的 匹配逻辑， 激活与之匹配的微应用， 如果激活的 是主应用， 页面指定渲染区域挂载主应用容器， 否则挂载子应用容器， 实现动态挂载微应用。 本 发明在主应用布局组件中采用插槽和自定义参 数的方式， 统一挂载主应用和子应用容器， 实现 微应用容器的动态挂载， 从而正常渲染页面。 权利要求书1页 说明书3页 附图4页 CN 114741638 A 2022.07.12 CN 114741638 A 1.一种基于乾坤微前端的全局容器动态挂载的实现方法， 其特 征在于， 包括： 步骤A、 前端工程配置微应用参数和自定义参数， 微应用参数包括微应用名称、 入口地 址、 容器ID和激活路径， 自定义参数是指主应用标记， 该参数用于标记当前微服务激活的是 主应用还是子应用， 其初始值 为true， 默认激活主应用； 步骤B、 用户登录后， 前端工程通过API接口获取全部路由数据， 通过格式转换和路由懒 加载处理， 实现路由封装； 该路由数据包括 地址、 对应组件、 和所属应用名称； 步骤C、 微服务基于乾坤注册微应用， 采用插槽和自定义参数的方式渲染页面， 完成用 户登录； 步骤D、 当用户点击不同页面时URL发生变化， URL的变化会自动触发乾坤的匹配逻辑， 所有与激活路径规则匹配上 的微应用都会被激活， 如果激活的是主应用， 页面指定渲染区 域挂载主应用容器， 如果激活的是子应用， 则修改主应用标记为false， 页面指定渲染区域 挂载子应用容器,实现动态加载微应用。 2.根据权利要求1所述的一种基于乾坤微前端的全局容器动态挂载的实现方法， 其特 征在于， 采用插槽和自定义 参数的方式渲染页面具体包括： 在布局组件的内容面板区域插入插槽组件， 插槽组件用于判断内容面板区域即将展示 的应用页面； 其中， 插槽组件内部只包含两个容器， 分别是主应用容器和子应用容器； 由于同一时间 只加载一个容器， 因此判断依据为主应用标记， 若主应用标记为true， 则挂载主应用容器， 布局组件的内容面板区域展示主应用页面； 否则， 挂载子应用容器， 布局组件的内容面板区 域展示子应用页面。 3.根据权利要求1所述的一种基于乾坤微前端的全局容器动态挂载的实现方法， 其特 征在于， 当某个微应用被激活后， 对应页面渲染前， 封装后的全部路由数据会进行筛选处 理， 依据当前激活微应用名称和路由数据中的所属应用名称是否一致， 筛选出符合当前微 应用的路由数据， 该路由数据包 含地址和对应组件。 4.根据权利要求1所述的一种基于乾坤微前端的全局容器动态挂载的实现方法， 其特 征在于， 当URL 发生变化时， 对比当前激活微应用的路由数据， 如果URL存在于当前微应用路 由数据中， 则页面 正常渲染， 否则返回404。权　利　要　求　书 1/1 页 2 CN 114741638 A 2一种基于乾坤微前端的全局容器动态挂载的实现方 法 技术领域 [0001]本发明涉及计算机技术领域， 具体 的说， 是一种基于乾坤微前端的全局容器动态 挂载的实现方法。 背景技术 [0002]在中后台管理系统中， 微服务单页面应用尤为常见， 通常多个应用之间会频繁切 换， 但是同一时刻只展示一个应用。 在页面渲染之前， 需要挂载子应用容器， 而通常子应用 容器各自配置， 按约定方式将子应用容器挂载至主应用上。 但是在场景复杂的中后台管理 系统中， 子应用容器的动态挂载实现较为少见， 尚没有应用于复杂场景子应用容器动态挂 载的实现方法。 发明内容 [0003]本发明的目的在于提供一种基于乾坤微前端的全局容器动态挂载的实现方法， 用 于解决现有技 术中尚没有应用于复杂场景中子应用容器动态挂载的实现方法的问题。 [0004]本发明通过 下述技术方案解决上述问题： [0005]一种基于乾坤微前端的全局容器动态挂载的实现方法， 包括： [0006]步骤A、 前端工程配置微应用参数和自定义参数， 微应用参数包括微应用名称、 入 口地址、 容器ID和激活路径， 自定义参数是指主应用标记， 该参数用于标记当前微服务激活 的是主应用还是子应用， 其初始值为true， 默认激活主应用； URL发生变化会匹配这些配置 参数， 从而启动与之匹配的微应用； [0007]步骤B、 用户登录后， 前端工程通过AP I接口获取全部路由数据， 通过格式转换和路 由懒加载处 理， 实现路由封装； 该路由数据包括 地址、 对应组件、 所属应用名称等； [0008]步骤C、 微服务基于乾坤注册微应用， 采用插槽和自定义参数的方式渲染页面， 完 成用户登录； [0009]步骤D、 当用户点击不同页面时URL发生变化， URL的变化会自动触发乾坤的匹配逻 辑， 所有与激活路径规则匹配上的微应用都会被激活， 如果激活的是主应用， 页面指 定渲染 区域挂载主应用容器， 如果激活的是子应用， 则修改主应用标记为false， 页面指定渲染区 域挂载子应用容器,实现动态加载微应用。 [0010]当某个微应用被激活页面渲染前， 封装后的全部路由数据会进行筛选处理， 依据 当前激活微应用名称和路由数据中的所属应用名称是否一致， 筛选出符合当前微应用的路 由数据， 该路由数据包 含地址、 对应组件等； [0011]当URL变化时， 对比当前激活微应用的路由数据， 如果URL存在于当前微应用路由 数据中， 则页面 正常渲染， 否则返回404。 [0012]采用插槽和自定义 参数的方式渲染页面具体包括： [0013]在布局组件的内容面板区域插入插槽组件， 插槽 组件用于判断内容面板区域即将 展示的应用页面；说　明　书 1/3 页 3 CN 114741638 A 3