## 菜单结构介绍 菜单管理页面可以对系统菜单和按钮进行统一管理。菜单可以拥有层级结构,一个菜单可以作为另一个菜单的上级,但按钮不能作为菜单的上级(虽然系统没有进行限制,但选择按钮作为上级毫无意义)。 ## 新增菜单 菜单管理页面右侧为菜单新增区域: ![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 <template> <div class="app-container"> <div id="message">{{ hello }}</div> </div> </template> <script> export default { data() { return { hello: 'hello world' } } } </script> <style scoped> #message { font-size: 1rem; font-weight: 600; color: #42b983; } </style> ``` 回到系统页面,再次点击测试菜单后,页面就会渲染出我们刚刚新增的组件: ![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 <template> <router-view /> </template> ``` 因为它是一个中间菜单,所以只要编写一个`<router-view/>`即可。 创建完该菜单后,我们继续创建第三级菜单,勾选刚刚创建的“测试菜单1”,点击“更多操作”下拉选中的“新增按钮”,然后在右侧区域填写如下内容: ![251.png](https://s2.ax1x.com/2019/09/07/n1YjgS.png) 创建完该菜单后,接着继续在src/views/febs/system/one下新增two目录,然后在该目录下新建Index.vue,代码如下所示: ```html <template> <div class="app-container"> <div id="message">{{ hello }}</div> </div> </template> <script> export default { data() { return { hello: 'hello world' } } } </script> <style scoped> #message { font-size: 1rem; font-weight: 600; color: #42b983; } </style> ``` 至此,三级菜单创建完毕,给角色授权并清除缓存后,系统菜单栏效果如下所示: ![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) 如果勾选的模块含有下级的话,下级也会一并被删除。