Spring Boot+Vue3 动态菜单实现思路梳理

松哥正在为TienChin项目录制配套视频，该项目基于Spring Boot和Vue3技术栈，涵盖多种技术点。他之前已经发布了两篇关于Spring Boot + Vue3动态菜单的文章，但一些小伙伴仍然有疑惑。因此，本文旨在提供一个更清晰的思路。

1. 整体思路

动态菜单分为四种基本情况：

• 有父有子的菜单。
• 只有一个一级菜单，可以是普通菜单、在当前系统中打开的外部网页链接或外链。

根据这些情况，动态菜单的JSON格式有所不同，但都以Layout作为父组件，并且菜单项的path是由父级和子级path拼接而成。

2. 前端渲染

前端动态菜单渲染位于tienchin-ui项目的SidebarItem.vue文件中，依据菜单是否隐藏、是否只有一个子菜单以及是否具有子菜单来决定其渲染方式。使用递归处理多级菜单，确保即使是多级菜单也能被正确渲染。

3. 后端菜单生成

3.1 菜单表

sys_menu表定义了菜单项的结构，菜单类型分为目录（M）、菜单（C）和按钮（F）。获取动态菜单时，只需要查询类型为M和C的数据。

3.2 菜单接口

用户登录成功后，前端会请求/getRouters接口以获取菜单信息。后端首先根据用户ID查询所有相关菜单，接着递归生成树形菜单结构。最后，将菜单数据转换成前端所需的路由数据。

本文详细解释了如何在Vue3和Spring Boot项目中实现动态菜单，包括菜单项的定义、前端渲染逻辑和后端的菜单生成逻辑。