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

今天整一篇文章和大家来捋一捋这个问题，希望这篇文章能让小伙伴们彻底搞清楚这个问题。

1. 整体思路

首先我们来看整体思路。

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

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

1. 有父有子：像系统管理那种，既有父菜单，又有子菜单。

2. 只有一个一级菜单，这种又细分为三种情况：

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

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

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

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

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

1. 有父有子：

{
 "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
  }
 }]
}

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

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

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

{
    "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"
            }
        }
    ]
}

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

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