vue3 后台管理框架geeker admin -- 纵向布局：侧边栏代码流程梳理(了解)

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

LayoutVertical/index.vue代码

LayoutVertical/index.scss代码

官网el-scrollbar组件

官网menu菜单

2 前言

要想在线看源码的，请点开 LayoutVertical/index.vue代码分析查看具体源码，本地的源码位置：src/layouts/LayoutVertical/index.vue，下面我就会直接用index.vue替代了。scss也是一样这样，本地源码的位置：src/layouts/LayoutVertical/index.scss。

3 分析构成

先看代码，本地找到index.vue，找到第10行的代码，如下图：

先看官方文档里的el-scrollbar组件(找到上面参考文档下官网el-scrollbar组件)，el-scrollbar 比较简单就是最好要自己设置个高度(这里index.scss下的 .el-scrollbar中已经设置好了高度，就是calc(100% - 55px)动态计算高度值的那个)，然后滚动条内塞要滚动的内容就行了。主要关注点是menu菜单(上面的参考文档下有官网menu菜单的链接，需要的自取)，

这里的router默认为false，可加可不加，因为不需要index作为path跳转，到时候需要手动处理的，所以为false即可。 collapse和isCollapse变量有关，水平折叠收起菜单等到header的时候，一起说。 default-active设置默认激活index。 unique-opened默认一个子菜单打开的。详情说明看下图：

menu菜单中生成二级菜单常用到的组件。配合下图：

• el-menu 是一个菜单组件，用于构建菜单结构。
• el-sub-menu 是子菜单组件，用于创建嵌套的子菜单。
• el-menu-item 是菜单项组件，表示菜单中的单个项目。

4 具体代码分析

先看el-menu中 :default-active="activeMenu"，这里的default-active的值来自于activeMenu。

这里的meta.activeMenu不存在，那么拿到的就是path，并且最终值需要断言成string。

比如我现在有三级菜单，如何将动态路由对象转成menu菜单的格式呢，带着这个疑问看<SubMenu :menu-list="menuList" />，这里的menuList来自authStore.showMenuListGet的值(路径：@/stores/modules/auth下的showMenuListGet)，点进去看一下，赫然看到了就是存在在pinia中的侧边栏菜单列表(动态路由)，再看getShowMenuList对菜单做了什么，首先深拷贝了一份侧边栏菜单列表，这里很巧妙的用了递归去掉isHide==true，如下图，先遍历菜单列表，若存在子项，继续使用getShowMenuList递归，直到没有子项了，返回 !isHide的值，若为false，则会被filter过滤掉的，这样就剔除掉需要隐藏的菜单了。

这里的SubMenu 是个自定义组件，如下图：

点进去看下，看下图，是不是很熟悉的结构，挨个遍历，有子项的，展示图标和标题，并将它的子项内容赋值SubMenu自定义组件，类似递归调用。若没有children子项，直接显示图标和标题。

请看第12行 el-menu-item v-else，它被赋予了点击事件，找到handleClickMenu点进去，30行这里判断它的meta里若有链接，跳转到新标签中，否则跳转指定路径。当然这里其实还没有结束，当不是链接的时候，跳转到那个路由，还没完，需要加载在main的区域内，那么还需要router-view联动配合，等到分析main那块在详细说明。

5 总结

其实主要就两点，一个是对左侧菜单的列表进行遍历，递归去除要隐藏的菜单，当然这个隐藏功能可以后端来做。第二个是对于左侧菜单的列表进行遍历，递归的将数据塞到对应的菜单组件中，最后还需要给子菜单(说的是el-menu-item)添加事件，做路由跳转或者链接跳转。待补充的内容：路由跳转时，还需要真正的内容渲染到main中，以及侧边栏的收缩，以及针对menu菜单组件样式的调整。