3. 菜单管理
最后更新于:2022-04-02 06:54:48
## 菜单结构介绍
菜单管理页面可以对系统菜单和按钮进行统一管理。菜单可以拥有层级结构,一个菜单可以作为另一个菜单的上级,但按钮不能作为菜单的上级(虽然系统没有进行限制,但选择按钮作为上级毫无意义)。
## 新增菜单
菜单管理页面右侧为菜单新增区域:
![240.png](https://s2.ax1x.com/2019/09/07/nQXfcq.png)
其中URL对应浏览器地址栏的URL,组件对应前端系统的Vue组件,权限用于后台系统接口控制。
比如,我们在系统管理下新增一个菜单:
1. 勾选左侧菜单树上系统管理,然后点击“更多操作”下拉选中的新增按钮(逻辑已经修改为树形下来选,请知悉):
![241.png](https://s2.ax1x.com/2019/09/07/nQjZKP.png)
可以看到,“上级ID”输入框的值自动赋值为所勾选菜单的ID,表示以该菜单为上级创建新的菜单。
2. 然后填写如下内容,并点击“新增按钮新增”:
![242.png](https://s2.ax1x.com/2019/09/07/nQxFXt.png)
点击新增后,左侧菜单树已经出现了刚刚新增的菜单:
![243.png](https://s2.ax1x.com/2019/09/07/nQxeAS.png)
但是你会发现,系统左侧菜单栏中并没有出现该菜单,这是因为我们还没有给角色授权。点击角色管理,然后编辑“管理员”角色,在右侧的权限树中,勾选上刚刚新增的菜单:
![244.png](https://s2.ax1x.com/2019/09/07/nQxNh4.png)
点击更新后,拥有管理员角色的用户就拥有了该菜单权限。权限更新生效需要重新登录系统,或者可以点击“清除缓存”按钮来刷新缓存:
![245.png](https://s2.ax1x.com/2019/09/07/nQxIDP.png)
点击后,可以看到菜单栏已经出现了刚刚新增的菜单:
![246.png](https://s2.ax1x.com/2019/09/07/nQxjvn.png)
但是,点击该菜单后,控制台报错了:
![247.png](https://s2.ax1x.com/2019/09/07/nQzeDx.png)
这是因为我刚刚新增菜单的时候指定组件地址为`febs/system/test/Index`,但我们并没有在前端项目里创建该组件。
在前端系统的src/views/febs/system路径下新建test目录,然后在该目录下新建Index.vue:
![248.png](https://s2.ax1x.com/2019/09/07/nlSnQs.png)
我们在Index.vue里编写了一些简单的Vue代码,代码如下所示:
```html
```
回到系统页面,再次点击测试菜单后,页面就会渲染出我们刚刚新增的组件:
![249.png](https://s2.ax1x.com/2019/09/07/nlSj00.png)
## 新增多级菜单
菜单可以拥有层级结构。一级菜单(如现有的“系统管理”、“系统监控”等)的组件栏固定填写为**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))。
勾选系统管理菜单,点击“更多操作”下拉选中的“新增按钮”,然后在右侧区域填写如下内容:
![250.png](https://s2.ax1x.com/2019/09/07/n1YG0s.png)
接着在前端项目的src/views/febs/system下新增one目录,然后在该目录下新建Index.vue,代码如下所示:
```html
```
因为它是一个中间菜单,所以只要编写一个` `即可。
创建完该菜单后,我们继续创建第三级菜单,勾选刚刚创建的“测试菜单1”,点击“更多操作”下拉选中的“新增按钮”,然后在右侧区域填写如下内容:
![251.png](https://s2.ax1x.com/2019/09/07/n1YjgS.png)
创建完该菜单后,接着继续在src/views/febs/system/one下新增two目录,然后在该目录下新建Index.vue,代码如下所示:
```html
```
至此,三级菜单创建完毕,给角色授权并清除缓存后,系统菜单栏效果如下所示:
![252.png](https://s2.ax1x.com/2019/09/07/n1t8gO.png)
## 新增按钮
新增按钮和新增菜单操作一致,只需要将类型选为按钮即可。比如在上面创建的测试菜单下新建一个“新增文章”按钮:
![253.png](https://s2.ax1x.com/2019/09/07/n1NFZd.png)
> 新增按钮后,并不是说页面上就会自动出现该按钮了,这里按钮的作用为权限分配。
## 修改菜单/按钮
修改菜单或者按钮,只需要点击菜单树中对应的菜单或者按钮(不是勾选)即可,比如我要修改测试菜单的相关信息:
![254.png](https://s2.ax1x.com/2019/09/07/n1NyJx.png)
## 删除菜单/按钮
勾选需要删除的菜单或者按钮,然后点击“更多操作”下拉选中的“删除按钮就可”:
![255.gif](https://s2.ax1x.com/2019/09/07/n1NoFI.gif)
如果勾选的模块含有下级的话,下级也会一并被删除。
';
{{ hello }}
{{ hello }}