《Vue3笔记》第26节：Vue3项目实现多层级菜单功能

最新推荐文章于 2025-06-13 12:01:03 发布
最新推荐文章于 2025-06-13 12:01:03 发布
阅读量315 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 【Vue3项目开发】 文章标签： 笔记 Vue3 Vue3多级菜单 嵌套菜单 Vue3实现多层级菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39826207/article/details/145393943

前一个小节的内容中，已经介绍了如何实现面包屑导航的功能。这个小节基于之前动态菜单的基础之上，添加多层级菜单的显示功能。

Vue3项目开发（微信文章集合）

在之前做的动态菜单中，会存在一个bug，那就是如果菜单层级超过2级，此时，菜单渲染就会报错，从而导致无法使用。这个小节就来解决多层级菜单的这个问题。

1.1、运行效果

这个小节实现的多层级菜单功能效果，如下图所示：

在这里插入图片描述

1.2、实现思路

要想实现多层级菜单，我们这里先在mock.js文件中，添加一个三级菜单的数据，如下所示：

/**
 * 模拟后端数据
 */
export const
了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Vue3笔记》第15节：Vue3项目实现管理后台左侧菜单栏的功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
01-12 376
前一个小节已经将管理后台首页面的布局结构搭建完成了，这个小节就来实现左侧菜单栏的功能界面。
【web前端笔记】vue3 + vite的前端项目中，使用import.meta.glob()方法实现全局注册组件的通用代码
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
11-16 748
这篇文章介绍一下，在vue3和vite搭建的项目中，如何将【src/components】目录下所有的【*.vue】文件，当做一个组件全局注册到Vue对象里面。
项目实战--实现一个多级菜单统一工具类
qq_40623672的博客
06-23 473
在项目开发工程中，经常需要实现多级菜单的效果，比如需要一个多级功能菜单、多级评论、多级部门等功能，如果每个项目都要定制一版代码或者SQL，就会面临代码重复开发的问题。为简化开发过程并提高代码的可维护性，我实现一个统一的工具类来处理这些需求，使用SpringBoot创建一个返回多级菜单、多级评论、多级部门、多级分类的统一工具类。
vue3 多级下拉菜单面板实现
weixin_44074729的博客
11-11 1422
实现过程 1.新建一个子组件menuPanel.vue <template> <div class="dropdown-menu" :data-theme="theme"> <ul class="droupdown-menu-list"> <li v-for="item in menuData" :key="item.key" class="dropdown-menu-item"
【VUE3】基于Vue3和Element Plus的递归组件实现多级导航栏
最新发布
Arabys的博客
06-13 1638
本文基于 Vue3 和 Element Plus，通过递归组件实现了可动态渲染的多级导航栏，利用自引用数据结构和深度控制避免无限循环，同时结合 TypeScript 规范数据类型并优化组件封装
2024年前端最新WEB前端工具推荐丨分享6个热门颜色选择器组件，2024年最新近期有什么面试
2401_84433535的博客
05-13 1466
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
vue表格无限下级，动态加载；或可手动新增无限下级
qq_56995244的博客
07-24 475
1. 最外层是表格，GridViewTableContainLine是我自定义表格组件，当成table就行，下级组件是TabShowBomItems，通过上级传参进行查询。使用时注意，父级传参子级是不能直接修改的，所以我是在子级有数据变化时，向上级提交数据重新往子级赋值，如下；而且这个vue2的数据双向绑定在数组数据变化时有点不太友好，不一定能监听到，使用时自己注意。2.组件，展示表格，表格的下级再次引用组件自身。放代码，这是table那块儿，组件ItemAndReplaceItem。
vue-admin-element框架三级菜单跳转问题
small_fox_dtt的博客
04-02 5519
遇到的问题： 当项目路由中书写三级菜单之后；跳转之后面包屑改变为三级了，但是页面比没有跳转（但是又要展示三级面包屑；又要跳转页面） 解决方法： 1.在二级菜单加一个<router-view></router-view>标签 (用来承载三级菜单页面) 2.在项目路由中的meta标签加一个参数开关来控制是否隐藏二级菜单页面 ...
vue-element-admin || 后台管理三级/多级菜单设置
qq1803291168
07-13 6010
针对前端 vue-element-admin 框架的三级菜单说明
Vue2学习笔记(尚硅谷天禹老师)
weixin_44992737的博客
04-24 1998
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
前端学习笔记____Vue2+Vue3全家桶
weixin_55181759的博客
08-09 7410
前端学习笔记____Vue2+Vue3全家桶前言第一部分 VUE基础一、Vue简介1. Vue是什么?2. Vue发展历史3. Vue的特点二、初识Vue1. Vue模板语法2. 数据绑定▲单向数据绑定v-bind▲ 双向数据绑定v-model3. el与data的两种写法▲ el的两种写法▲ data的两种写法4. MVVM模型5.数据代理6. 事件处理▲ 事件处理v-on▲ 事件修饰符▲ 键盘事件key7. 计算属性computed与监视(侦听)属性watch▲ 计算属性－computed▲ 监视(侦听
vue单个组件实现无限层级多选菜单功能
08-27
主要介绍了vue单个组件实现无限层级多选菜单的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Vue-element-admin 显示3级路由
Chuzhaoyun的博客
06-25 743
需要在二级路由新建一个跳转页面，index.vue如图。
Vue iview-admin框架二级菜单改为三级菜单
weixin_33721427的博客
07-02 1410
最近在用 iview-admin的Vue后台模板，从git上下载后发现左侧导航栏最多支持到二级菜单,也发现很多童鞋在问如何实现三级菜单。在实际的应用场景中还是会出现三级菜单的需求的，木有其他好办法，只能自己手动改代码了。 1. 第一步：首先改写VUE中的模板，修改sidebarMenu.vue文件，文件具体目录建下图： 将Menu导航菜...
vue-element设置三级菜单栏，页面空白解决办法
changyana的博客
12-26 2621
设置二级的时候，页面都可以正常加载，然后把二级可以加载出的页面放在三级菜单栏后，加载出来就是空白的了，什么都没有，在控制台看，app-main里的内容什么都没有，不会渲染出页面。
vue实现无限层级菜单，递归组件用法
weixin_48309048的博客
12-06 1566
vue实现无限层级菜单，递归组件用法
vue data 值如何渲染_vue项目多级菜单，如何渲染
weixin_39674293的博客
12-01 337
1、当不确定菜单有多少层级的时候，第一时间就想到使用递归的方式渲染菜单，下面我们来看看如何实现。菜单图例2、使用ivew菜单组件，目前项目也用的是这个框架，不熟悉的小伙伴可以先看看这个菜单组件，熟悉的小伙伴我们继续向下看。3、我的实现思路，判断没有子菜单单的时候，使用组件的正常渲染，如果有子菜单，那就需要加载这个组件 <left-menu-nav />，继续帮我们循环，走下一步 &...
Vue中级联菜单技术分享
musheqianqian的博客
04-14 902
级联菜单
vue手动实现多层级菜单列表
qq_52937529的博客
03-27 787
vue手动实现多级菜单列表，包括菜单的路由跳转
vue3学习笔记
03-13
好的，我现在需要帮助用户寻找关于Vue3的学习资料或笔记。首先，用户已经提供了一些参考引用，其中提到了创建Vue3工程的方法和npm版本的要求。我需要结合这些信息，整理出一个结构清晰的回答，并生成相关问题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值