文章目录
-
系列文章目录
-
前言
-
- 一、RuoYi-Vue3-qiankun的由来
-
二、设计思路
-
- 最初的设计是这样的:
-
最终设计
-
三、实现步骤细节
-
- 1、主应用注册子应用
-
2、主应用加载后端路由(全部项目内容)
-
3、主应用菜单跳转子应用
=============================================================
这篇文章本来写于一年前,今天突然有人加我问起RuoYi-Vue3-qiankun库如何实现的,我瞬间失忆了,一年前的代码不知道怎么写的了。
所以写下这篇用来以后回忆。
在 vue3+ts+element-plus 的基础上,实践了一下,将RuoYI前后端分离版本前端重写了一下,产生了RuoYi-Vue3 开源版本。
但是这个版本并不能更好的满足公司技术需求,在RuoYi-Vue3的基础上 加入了qiankun ,改成了微前端的版本。
RuoYi-Vue3仓库地址:https://github.com/RainManGO/RuoYi-Vue3
RuoYi-Vue3-qiankun仓库地址:
https://github.com/RainManGO/RuoYi-Vue3-qiankun
最初的设计是这样的:
-
主应用:负责注册加载子应用,不负责侧边栏菜单路由,子应用组织好路由,提供给主应用加载。
-
子应用: 自己加载后端路由,然后通信主应用渲染上
但是这样做,我没法控制所有的子应用都加载完,主应用再渲染,也不利于统一管理后端路由。
最终设计
更改了思路,采用主应用加载菜单数据。主应用没有子应用组件和路由只是通过url 调用。
这里贴图,具体找到仓库代码查看。
1、主应用注册子应用
对象篇
模块化编程-自研模块加载器