3. 菜单管理
最后更新于：2022-04-02 06:54:48
## 菜单结构介绍
菜单管理页面可以对系统菜单和按钮进行统一管理。菜单可以拥有层级结构，一个菜单可以作为另一个菜单的上级，但按钮不能作为菜单的上级（虽然系统没有进行限制，但选择按钮作为上级毫无意义）。
## 新增菜单
菜单管理页面右侧为菜单新增区域：
其中URL对应浏览器地址栏的URL，组件对应前端系统的Vue组件，权限用于后台系统接口控制。
比如，我们在系统管理下新增一个菜单：
1. 勾选左侧菜单树上系统管理，然后点击“更多操作”下拉选中的新增按钮（逻辑已经修改为树形下来选，请知悉）：
可以看到，“上级ID”输入框的值自动赋值为所勾选菜单的ID，表示以该菜单为上级创建新的菜单。
2. 然后填写如下内容，并点击“新增按钮新增”：
点击新增后，左侧菜单树已经出现了刚刚新增的菜单：
但是你会发现，系统左侧菜单栏中并没有出现该菜单，这是因为我们还没有给角色授权。点击角色管理，然后编辑“管理员”角色，在右侧的权限树中，勾选上刚刚新增的菜单：
点击更新后，拥有管理员角色的用户就拥有了该菜单权限。权限更新生效需要重新登录系统，或者可以点击“清除缓存”按钮来刷新缓存：
点击后，可以看到菜单栏已经出现了刚刚新增的菜单：
但是，点击该菜单后，控制台报错了：
这是因为我刚刚新增菜单的时候指定组件地址为`febs/system/test/Index`，但我们并没有在前端项目里创建该组件。
在前端系统的src/views/febs/system路径下新建test目录，然后在该目录下新建Index.vue：
我们在Index.vue里编写了一些简单的Vue代码，代码如下所示：
```html
```
回到系统页面，再次点击测试菜单后，页面就会渲染出我们刚刚新增的组件：
## 新增多级菜单
菜单可以拥有层级结构。一级菜单（如现有的“系统管理”、“系统监控”等）的组件栏固定填写为**Layout**；二级菜单为末级菜单的话，组件栏填写前端系统定义的组件地址；如果二级菜单还有下级菜单的话，那么它就是一个中间菜单。下面演示如何新建一个三级菜单（更多层级以此类推即可，您也可以参考vue element admin的文档：[多级目录](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E5%A4%9A%E7%BA%A7%E7%9B%AE%E5%BD%95-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1)）。
勾选系统管理菜单，点击“更多操作”下拉选中的“新增按钮”，然后在右侧区域填写如下内容：
接着在前端项目的src/views/febs/system下新增one目录，然后在该目录下新建Index.vue，代码如下所示：
```html
';
{{ hello }}
{{ hello }}