Vue3.0如何实现长尾词的无限级菜单？

本文共计1848个文字，预计阅读时间需要8分钟。

业务需求+菜单项是业务系统的核心组成部分，通常业务系统需要支持显示多级业务菜单，但根据每个业务人员的权限不同，看到的菜单项也会有所不同。这就要求页面能够支持无限级联显示。

业务需求

菜单项是业务系统的重要组成部分，一般业务系统都要支持显示多级业务菜单，但是根据每个业务人员的权责不同，看到的的菜单项也是不同的。

这就要求页面可以支持无限极菜单显示，根据每个用户的权限不同，后台服务返回对应的菜单项。

本文基于Vue 3.0实现了一个可配置的无限等级菜单，关键代码如下：

后端返回的菜单项数据结构

后端服务一般不会直接返回一个树型结构菜单集合给前端，这样做也不合理。前端应该根据自己的具体需求，构建自己的菜型单树。后端返回的数据结构一般包含以下一个字段：

• Id 菜单ID， 数字类型
• pId当前菜单的父级菜单ID， 数字类型
• title 菜单的标题
• link 菜单对应的链接
• order 同级菜单的排列顺序，数字类型

其他业务字段需要具体问题具体分析，在这里不再赘述。本文不再讨论后端如何进行菜单项的权限控制，所使用的菜单内容，包括在一个JSON文件中，具体见附录。

菜单内容是一个足球数据管理系统，包括多级菜单：

• 第一级菜单只有一项，是所有节点的祖先节点。
• 第二级菜单包括联赛管理，俱乐部管理和球员管理
• 第三级菜单包括二级菜单内容的CRUD。

关键代码

为了支持无限级菜单，本文所有关键算法全部基于递归实现。