--- highlight: a11y-dark theme: smartblue --- >作者：小土豆biubiubiu >博客园：https://www.cnblogs.com/HouJiao/ >掘金：https://juejin.im/user/2436173500265335 >作者文章的内容均来源于自己的实践，如果觉得有帮助到你的话，可以点赞给个鼓励或留下宝贵意见 # 前言在日常开发中，项目中的菜单栏都是已经实现好了的。如果需要添加新的菜单，只需要在`路由配置`中新增一条路由，就可以实现菜单的添加。相信大家和我一样，有时候会跃跃欲试自己去实现一个菜单栏。那今天我就将自己实现的菜单栏的整个思路和代码分享给大家。 > 本篇文章重在总结和分享菜单栏的一个`递归实现方式`，`代码的优化`、`菜单权限`等不在本篇文章范围之内，在文中的相关部分也会做一些提示，有个别不推荐的写法希望大家不要参考哦。 > > 同时可能会存在一些细节的功能没有处理或者没有提及到，忘知晓。 # 最终的效果 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a3181bb5ed24689bd92be4365a938a3~tplv-k3u1fbpfcp-zoom-1.image) 本次实现的这个菜单栏包含有`一级菜单`、`二级菜单`和`三级菜单`这三种类型，基本上已经可以覆盖项目中不同的菜单需求。后面会一步一步从易到难去实现这个菜单。 # 简单实现我们都知道到`element`提供了 [`NavMenu`](https://element.eleme.cn/#/zh-CN/component/menu) 导航菜单组件，因此我们直接按照文档将这个菜单栏做一个简单的实现。基本的布局架构图如下： ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0303f89ca9ce4fc4bd2ca70074e6bb66~tplv-k3u1fbpfcp-zoom-1.image) ### 菜单首页-menuIndex 首先要实现的是`菜单首页`这个组件，根据前面的布局架构图并且参考官方文档，实现起来非常简单。 ```html ``` ### 顶部菜单栏-topMenu 顶部菜单栏主要就是一个`logo`和`产品名称`。逻辑代码也很简单，我直接将代码贴上。 ```html ``` 这段代码中包含了`父组件`传递给`子组件`的两个数据。 ```javascript props: ['logoPath', 'name'] ``` 这个是父组件`menuIndex`传递给子组件`topMenu`的两个数据，分别是`logo图标的路径`和`产品名称`。完成后的界面效果如下。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34e798b3c5834f0799a85599fd47550a~tplv-k3u1fbpfcp-zoom-1.image) ### 左侧菜单栏-leftMenu 首先按照官方文档实现一个简单的菜单栏。 ```html ``` > 注意菜单的样式代码，设置了`绝对定位`，并且设置`top`、`bottom`使菜单高度撑满屏幕。此时在看下界面效果。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c872d81349d3486b89487e937d3bb49c~tplv-k3u1fbpfcp-zoom-1.image) 基本上算是实现了一个简单的菜单布局。不过在实际项目在设计的时候，菜单栏的内容有可能来自后端给我们返回的数据，其中包含`菜单名称`、`菜单图标`以及`菜单之间的层级关系`。总而言之，我们的菜单是动态生成的，而不是像前面那种固定的写法。因此下面我将实现一个动态生成的菜单，菜单的数据来源于我们的`路由配置`。 # 结合路由配置实现动态菜单 ### 路由配置首先，我将项目的路由配置代码贴出来。 ```javascript import Vue from 'vue'; import Router from "vue-router"; // 菜单 import MenuIndex from '@/components/menu/menuIndex.vue'; // 首页 import Index from '@/components/homePage/index.vue'; // 人员统计 import EmployeeStatistics from '@/components/employeeManage/employeeStatistics.vue'; import EmployeeManage from '@/components/employeeManage/employeeManage.vue' // 考勤 // 考勤统计 import AttendStatistics from '@/components/attendManage/attendStatistics'; // 考勤列表 import AttendList from '@/components/attendManage/attendList.vue'; // 异常管理 import ExceptManage from '@/components/attendManage/exceptManage.vue'; // 工时 // 工时统计 import TimeStatistics from '@/components/timeManage/timeStatistics.vue'; // 工时列表 import TimeList from '@/components/timeManage/timeList.vue'; Vue.use(Router) let routes = [ // 首页(仪表盘、快速入口) { path: '/index', name: 'index', component: MenuIndex, redirect: '/index', meta: { title: '首页', // 菜单标题 icon: 'el-icon-s-home', // 图标 hasSubMenu: false, // 是否包含子菜单，false 没有子菜单；true 有子菜单 }, children:[ { path: '/index', component: Index } ] }, // 员工管理 { path: '/employee', name: 'employee', component: MenuIndex, redirect: '/employee/employeeStatistics', meta: { title: '员工管理', // 菜单标题 icon: 'el-icon-user-solid', // 图标 hasSubMenu: true, // 是否包含子菜单 }, children: [ // 员工统计 { path: 'employeeStatistics', name: 'employeeStatistics', meta: { title: '员工统计', // 菜单标题, hasSubMenu: false // 是否包含子菜单 }, component: EmployeeStatistics, }, // 员工管理(增删改查) { path: 'employeeManage', name: 'employeeManage', meta: { title: '员工管理', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, component: EmployeeManage } ] }, // 考勤管理 { path: '/attendManage', name: 'attendManage', component: MenuIndex, redirect: '/attendManage/attendStatistics', meta: { title: '考勤管理', // 菜单标题 icon: 'el-icon-s-claim', // 图标 hasSubMenu: true, // 是否包含子节点，false 没有子菜单；true 有子菜单 }, children:[ // 考勤统计 { path: 'attendStatistics', name: 'attendStatistics', meta: { title: '考勤统计', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, component: AttendStatistics, }, // 考勤列表 { path: 'attendList', name: 'attendList', meta: { title: '考勤列表', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, component: AttendList, }, // 异常管理 { path: 'exceptManage', name: 'exceptManage', meta: { title: '异常管理', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, component: ExceptManage, } ] }, // 工时管理 { path: '/timeManage', name: 'timeManage', component: MenuIndex, redirect: '/timeManage/timeStatistics', meta: { title: '工时管理', // 菜单标题 icon: 'el-icon-message-solid', // 图标 hasSubMenu: true, // 是否包含子菜单，false 没有子菜单；true 有子菜单 }, children: [ // 工时统计 { path: 'timeStatistics', name: 'timeStatistics', meta: { title: '工时统计', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, component: TimeStatistics }, // 工时列表 { path: 'timeList', name: 'timeList', component: TimeList, meta: { title: '工时列表', // 菜单标题 hasSubMenu: true // 是否包含子菜单 }, children: [ { path: 'options1', meta: { title: '选项一', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, }, { path: 'options2', meta: { title: '选项二', // 菜单标题 hasSubMenu: false // 是否包含子菜单 }, }, ] } ] }, ]; export default new Router({ routes }) ``` 在这段代码的最开始部分，我们引入了需要使用的组件，接着就对路由进行了配置。 > 此处使用了直接引入组件的方式，项目开发中`不推荐`这种写法，应该使用`懒加载`的方式路由配置除了最基础的`path`、`component`以及`children`之外，还配置了一个`meta`数据项。 ```javascript meta: { title: '工时管理', // 菜单标题 icon: 'el-icon-message-solid', // 图标 hasSubMenu: true, // 是否包含子节点，false 没有子菜单；true 有子菜单 } ``` `meta`数据包含的配置有`菜单标题`(`title`)、`图标的类名`(`icon`)和`是否包含子节点`(`hasSubMenu`)。根据`title`、`icon`这两个配置项，可以展示当前菜单的`标题`和`图标`。 `hasSubMenu`表示当前的菜单项是否有子菜单，如果当前菜单包含有子菜单(`hasSubMenu`为`true`)，那当前菜单对应的标签元素就是`el-submenu`；否则当前菜单对应的菜单标签元素就是`el-menu-item`。 > 是否包含子菜单是一个非常关键的逻辑，我在实现的时候是直接将其配置到了`meta.hasSubMenu`这个参数里面。 ### 根据路由实现多级菜单路由配置完成后，我们就需要根据路由实现菜单了。 #### 获取路由配置既然要根据路由配置实现多级菜单，那第一步就需要获取我们的路由数据。这里我使用简单粗暴的方式去获取路由配置数据：`this.$router.options.routes`。 > 这种方式也不太适用日常的项目开发，因为无法在获取的时候对路由做进一步的处理，比如`权限控制`。我们在组件加载时打印一下这个数据。 ```javascript // 代码位置：src/menu/leftMenu.vue mounted(){ console.log(this.$router.options.routes); } ``` 打印结果如下。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c23ca20f2c74aee903a7a76d331504f~tplv-k3u1fbpfcp-zoom-1.image) 可以看到这个数据就是我们在`router.js`中配置的路由数据。为了方便使用，我将这个数据定义到计算属性中。 ```javascript // 代码位置：src/menu/leftMenu.vue computed: { routesInfo: function(){ return this.$router.options.routes; } } ``` #### 一级菜单首先我们来实现`一级菜单`。主要的逻辑就是循环路由数据`routesInfo`，在循环的时候判断当前路由`route`是否包含子菜单，如果包含则当前菜单使用`el-submenu`实现，否则当前菜单使用`el-menu-item`实现。 ```html ``` 结果： ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3bef29f8e7014a78bf76c2323cc2b79f~tplv-k3u1fbpfcp-zoom-1.image) 可以看到，我们第一级菜单已经生成了，`员工管理`、`考勤管理`、`工时管理`这三个菜单是有子菜单的，所以会有一个下拉按钮。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50881a24a19a4cdd957895cdb0f38662~tplv-k3u1fbpfcp-zoom-1.image) 不过目前点开是没有任何内容的，接下来我们就来实现这三个菜单下的`二级菜单`。 #### 二级菜单 `二级菜单`的实现和`一级菜单`的逻辑是相同的：循环子路由`route.children`，在循环的时候判断子路由`childRoute`是否包含子菜单，如果包含则当前菜单使用`el-submenu`实现，否则当前菜单使用`el-menu-item`实现。那话不多说，直接上代码。 ```html ``` 结果如下： ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfff1a3f90164eeb8f4b0a0797fa589b~tplv-k3u1fbpfcp-zoom-1.image) 可以看到`二级菜单`成功实现。 #### 三级菜单 `三级菜单`就不用多说了，和`一级`、`二级`逻辑相同，这里还是直接上代码。 ```html ``` ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c44e9cc6e974ef19ab1320f9df105e1~tplv-k3u1fbpfcp-zoom-1.image) 可以看到`工时列表`下的`三级菜单`已经显示了。 #### 总结此时我们已经结合`路由配置`实现了这个动态的菜单。不过这样的代码在逻辑上相关于`三层嵌套`的`for`循环，对应的是我们有三层的菜单。假如我们有`四层`、`五层`甚至更多层的菜单时，那我们还得在嵌套更多层`for`循环。很显然这样的方式暴露了前面多层`for`循环的缺陷，所以我们就需要对这样的写法进行一个改进。 # 递归实现动态菜单前面我们一直在说`一级`、`二级`、`三级`菜单的实现逻辑都是相同的：循环子路由，在循环的时候判断子路由是否包含子菜单，如果包含则当前菜单使用`el-submenu`实现，否则当前菜单使用`el-menu-item`实现。那这样的逻辑最适合的就是使用`递归`去实现。所以我们需要将这部分共同的逻辑抽离出来作为一个独立的组件，然后递归的调用这个组件。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6bcca08557647e69566bd2283454862~tplv-k3u1fbpfcp-zoom-1.image) ### 逻辑拆分 ```html ``` 需要注意的是，这次抽离出来的组件循环的时候直接循环的是`route`数据，那这个`route`数据是什么呢。我们先看一下前面三层循环中循环的数据源分别是什么。 > 为了看得更清楚，我将前面代码中一些不相关的内容进行了删减。 ```html

``` 从上面的代码可以看到: 一级菜单循环的是`routeInfo`，即最初我们获取的路由数据`this.$router.options.routes`，循环出来的每一项定义为`route` 二级菜单循环的是`route.children`，循环出来的每一项定义为`childRoute` 三级菜单循环的是`childRoute.children`,循环出来的每一项定义为`child` 按照这样的逻辑，可以发现`二级菜单`、`三级菜单`循环的数据源都是相同的，即前一个循环结果项的`children`，而一级菜单的数据来源于`this.$router.options.routes`。前面我们抽离出来的`menuItem`组件，循环的是`route`数据，即不管是`一层菜单`还是`二层`、`三层菜单`，都是同一个数据源，因此我们需要统一数据源。那当然也非常好实现，我们在调用组件的时候，为组件传递不同的值即可。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2965e41221f94811a536b804e5832c08~tplv-k3u1fbpfcp-zoom-1.image) ### 代码实现前面公共组件已经拆分出来了，后面的代码就非常好实现了。首先是抽离出来的`meunItem`组件，实现的是`逻辑判断`以及`递归调用自身`。 ```html ``` 接着是`leftMenu`组件，调用`menuIndex`组件，传递原始的路由数据`routesInfo`。 ```html ``` 最终的结果这里就不展示了，和我们需要实现的结果是一致的。 # 功能完善到此，我们`结合路由配置实现了菜单栏`这个功能基本上已经完成了，不过这是一个缺乏灵魂的菜单栏，因为没有设置菜单的跳转，我们点击菜单栏还无法路由跳转到对应的`组件`，所以接下来就来实现这个功能。菜单跳转的实现方式有两种，第一种是`NavMenu`组件提供的跳转方式。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b737dc2e3307448dbac9265d7bf2f862~tplv-k3u1fbpfcp-zoom-1.image) 第二种是在菜单上添加`router-link`实现跳转。那本次我选择的是第一种方式实现跳转,这种实现方式需要两个步骤才能完成，第一步是启用`el-menu`上的`router`;第二步是设置导航的`index`属性。那下面就来实现这两个步骤。 ### 启用el-menu上的router ```html ``` ### 设置导航的index属性首先我将每一个菜单标题对应需要设置的`index`属性值列出来。 > `index`值对应的是每个菜单在路由中配置的`path`值首页员工管理员工统计 index="/employee/employeeStatistics" 员工管理 index="/employee/employeeManage" 考勤管理考勤统计 index="/attendManage/attendStatistics" 考勤列表 index="/attendManage/attendList" 异常管理 index="/attendManage/exceptManage" 员工统计员工统计 index="/timeManage/timeStatistics" 员工统计 index="/timeManage/timeList" 选项一 index="/timeManage/timeList/options1" 选项二 index="/timeManage/timeList/options2" 接着在回顾前面递归调用的组件，导航菜单的`index`设置的是`child.path`，为了看清楚`child.path`的值，我将其添加菜单标题的右侧，让其显示到界面上。 ```html

{{child.meta.title}} | {{child.path}} ``` 同时将菜单栏的宽度由`200px`设置为`400px`。 ```html ``` 然后我们看一下效果。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3eb7983209884cc791fc444289611632~tplv-k3u1fbpfcp-zoom-1.image) 可以发现，`child.path`的值就是当前菜单在路由中配置`path`值(`router.js`中配置的`path`值)。那么问题就来了，前面我们整理了每一个菜单标题对应需要设置的`index`属性值，就目前来看,现在设置的`index`值是不符合要求的。不过仔细观察现在菜单设置的`index`值和正常值是有一点接近的，只是缺少了上一级菜单的`path`值，如果能将`上一级菜单`的`path`值和当前菜单的`path`值进行一个拼接，就能得到正确的`index`值了。那这个思路实现的方式依然是在递归时将当前菜单的`path`作为参数传递给`menuItem`组件。 ```html ``` 将当前菜单的`path`作为参数传递给`menuItem`组件之后，在下一级菜单实现时，就能拿到上一级菜单的`path`值。然后组件中将`basepath`的值和当前菜单的`path`值做一个拼接，作为当前菜单的`index`值。 ```html

``` 再看一下界面。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b743a56066b4429fb3b22383862655bf~tplv-k3u1fbpfcp-zoom-1.image) 我们可以看到二级菜单的`index`值已经没问题了，但是仔细看，发现`工时管理`-`工时列表`下的两个三级菜单`index`值还是有问题，缺少了`工时管理`这个一级菜单的`path`。那这个问题是因为我们在调用组件自身是传递的`basepath`有问题。 ```html ``` `basepath`传递的只是上一级菜单的`path`，在递归`二级菜单`时，`index`的值是`一级菜单的path值`+`二级菜单的path值`;那当我们递归`三级菜单`时，`index`的值就是`二级菜单的path值`+`三级菜单的path值`，这也就是为什么`工时管理-工时列表`下的两个三级菜单`index`值存在问题。所以这里的`basepath`值在递归的时候应该是`累积`的，而不只是上一级菜单的`path`值。因此借助递归算法的优势，`basepath`的值也需要通过`getPath`方法进行处理。 ```html ``` 最终完整的代码如下。 ```html ``` > 删除其余用来调试的代码 # 最终效果文章的最后呢，将本次实现的最终效果在此展示一下。 ![](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/350f1fe9fdc04e31a52863bf3e8c6e60~tplv-k3u1fbpfcp-zoom-1.image) > `选项一`和`选项二`这两个三级菜单在路由配置中没有设置`component`，这两个菜单只是为了实现三级菜单，在最后的结果演示中，我已经删除了路由中配置的这两个三级菜单 > > 此处在`leftMenu`组件中为`el-menu`开启了`unique-opened` > > 在`menuIndex`组件中，将左侧菜单栏的宽度改为`200px`