如何通过Vue与路由递归配置实现动态菜单栏功能？

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

前言：在日常开发中，项目中的菜谱列表已经实现得很好了。如果需要添加新的菜谱，只需在+ 路径配置中新增一条路径，即可实现菜谱的添加。相信大家和我一样，有时会跃跃欲试。

前言

在日常开发中，项目中的菜单栏都是已经实现好了的。如果需要添加新的菜单，只需要在路由配置中新增一条路由，就可以实现菜单的添加。

相信大家和我一样，有时候会跃跃欲试自己去实现一个菜单栏。那今天我就将自己实现的菜单栏的整个思路和代码分享给大家。

本篇文章重在总结和分享菜单栏的一个递归实现方式，代码的优化、菜单权限等不在本篇文章范围之内，在文中的相关部分也会做一些提示，有个别不推荐的写法希望大家不要参考哦。

同时可能会存在一些细节的功能没有处理或者没有提及到，忘知晓。

最终的效果

本次实现的这个菜单栏包含有一级菜单、二级菜单和三级菜单这三种类型，基本上已经可以覆盖项目中不同的菜单需求。

后面会一步一步从易到难去实现这个菜单。

简单实现

我们都知道到element提供了 NavMenu 导航菜单组件，因此我们直接按照文档将这个菜单栏做一个简单的实现。