动态菜单:用Spring Boot+Vue3教你怎么实现

本文详细介绍了如何使用Spring Boot后端和Vue3前端实现动态菜单。整体思路涉及四种菜单类型,并展示了前端渲染的实现方式,包括菜单渲染的逻辑。后端部分讲解了菜单表的设计和菜单接口的生成,特别是如何处理菜单数据的递归和转换为前端所需格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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.javaboy.org"
    }
}
复制代码

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

  1. 父组件都是 Layout,这里的 Layout 就相当于我们 vhr 中的 Home 组件,也就是整个页面的框架。
  2. 如果想在当前系统中,新开选项卡打开一个功能项,那么这个菜单项必然有 children,即使 children 中只有一项菜单。
  3. 如果菜单项是一个外链,那么这个菜单项就不需要有 children 了。
  4. 某种程度上,我们其实可以将 2、3 归为一类,毕竟 3 只是展示内容的组件固定为 InnerLink,2 则视情况而定。
  5. 整体上,可以点击的菜单的 path 都是父菜单的 path + 子菜单的 pat
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值