系列文章目录

前言

这篇文章本来写于一年前，今天突然有人加我问起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 调用。

这里贴图，具体找到仓库代码查看。

利用qiankun 微前端框架，看官网集成即可。
在这里插入图片描述

主应用通过require 动态添加菜单路由，这个代码是和单体项目公用没有修改，有些冗余，不需要往路由上挂 component，用不到的。

下一步跳转可以看清楚为什么。
在这里插入图片描述

这里利用window.history.push进行跳转，qiankun 官网有解释就不多少了。
在这里插入图片描述

在这里插入图片描述

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起