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

最新推荐文章于 2025-09-30 11:26:55 发布

原创

最新推荐文章于 2025-09-30 11:26:55 发布 · 357 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #json #java

本文详细梳理了Spring Boot+Vue3动态菜单的实现思路，包括整体设计、前端渲染和后端菜单生成。整体思路分为四种菜单类型，并提供了相应的JSON格式示例。前端渲染主要在`SidebarItem.vue`文件中完成，利用递归实现不同类型的菜单渲染。后端通过查询菜单表并递归处理，生成前端所需的路由数据。整个过程旨在让读者清晰理解动态菜单的构建逻辑。

关于 Spring Boot + Vue3 的动态菜单，松哥之前已经写了两篇文章了，这两篇文章主要是从代码上和大家分析动态菜单最终的实现方式，但是还是有小伙伴觉得没太看明白，感觉缺乏一个提纲挈领的思路，所以，今天松哥再整一篇文章和大家再来捋一捋这个问题，希望这篇文章能让小伙伴们彻底搞清楚这个问题。

1. 整体思路

首先我们来看整体思路。

光说思路大家还是云里雾里，我们结合具体的效果图来看：

最终菜单显示效果类似上图，我把这里的菜单分为了四类：

有父有子：像系统管理那种，既有父菜单，又有子菜单。
只有一个一级菜单，这种又细分为三种情况：

普通的菜单，点击之后在右边主页面打开某个功能页面。

一个超链接，但不是外链，是一个在当前系统中打开的外部网页，点击之后，会在右边的主页面中新开一个选项卡，这个选项卡中显示的是一个外部网页（本质上是通过 iframe 标签引入的一个外部网页）。

一个超链接，并且还是一个外链，点击之后，直接在浏览器中打开一个新的选项卡，新的选项卡中展示一个外部链接。

整体上来说，就分为这四种情况。其中 1、2.1、2.3 应该都好理解，2.2 有的小伙伴可能不清楚，我给大家截个图看下就知道了：

四种菜单对应的 JSON 格式分别如下：

有父有子：

{
 "name": "Monitor",
 "path": "/monitor",
 "hidden": false,
 "redirect": "noRedirect",
 "component": "Layout",
 "alwaysShow": true,
 "meta": {
  "title": "系统监控",
  "icon": "monitor",
  "noCache": false,
  "link": null
 },
 "children": [{
  "name": "Online",
  "path": "online",
  "hidden": false,
  "component": "monitor/online/index",
  "meta": {
   "title": "在线用户",
   "icon": "online",
   "noCache": false,
   "link": null
  }
 }, {
  "name": "Job",
  "path": "job",
  "hidden": false,
  "component": "monitor/job/index",
  "meta": {
   "title": "定时任务",
   "icon": "job",
   "noCache": false,
   "link": null
  }
 }]
}

只有一个一级菜单，且一级菜单点击后是一个功能页面：

{
 "path": "/",
 "hidden": false,
 "component": "Layout",
 "children": [{
  "name": "Role",
  "path": "role",
  "hidden": false,
  "component": "system/role/index",
  "meta": {
   "title": "角色管理",
   "icon": "peoples",
   "noCache": false,
   "link": null
  }
 }]
}

只有一个一级菜单，且一级菜单点击之后在当前系统中一个新的选项卡里打开一个网页：

{
    "name": "Http://www.javaboy.org",
    "path": "/",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官网",
        "icon": "guide",
        "noCache": false,
        "link": null
    },
    "children": [
        {
            "name": "Www.javaboy.org",
            "path": "www.javaboy.org",
            "hidden": false,
            "component": "InnerLink",
            "meta": {
                "title": "TienChin健身官网",
                "icon": "guide",
                "noCache": false,
                "link": "http://www.javaboy.org"
            }
        }
    ]
}

只有一个一级菜单，且一级菜单点击之后在浏览器打开一个新的选项卡：

{
    "name": "Http://www.javaboy.org",
    "path": "http://www.javaboy.org",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官网",
        "icon": "guide",
        "noCache": false,
        "link": "http://www.javaboy.org"
    }
}

根据以上四种不同的 JSON，我们总结出以下规律：