Vue路由递归配置如何实现菜单栏，长尾词？

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

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

前言

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

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

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

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

最终的效果

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

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