vue-element-admin 添加菜单的步骤记录
vue-element-admin后台管理系统
今年来杭州之前，我都不知道有这么一个封装好的方便前端直接使用的后台管理系统，是基于vue与element-ui的，并且是响应式的。
真的超级nice.
来杭州之后，先后从事的两家电商公司都是用的这个后台管理系统。据说是傻瓜式的部署，后端同事也是可以很快上手的。我不得不说，我是真的菜……
PC端布局
移动端布局
如何添加菜单页面
添加菜单页面（父菜单/子菜单）
点击左侧菜单中的“系统管理”按钮，在展示的下拉菜单中，点击“菜单管理”选项，然后右侧会展示菜单管理的目录，在目录中选择想要添加子菜单的父级目录或者直接在右侧输入框中输入直接作为父菜单。
我试过，直接在右侧输入，父目录选择已有的菜单，这样进行添加子菜单，结果是错的。呃，不知道是不是我的操作错误。为了保证正确性，可以采用下面的方法：
- 添加父目录：在右侧输入框中直接添加，父目录默认为空即可。
- 添加子目录：在菜单目录中找到父目录，然后右击添加，父目录会自动显示，其他内容直接输入即可。
右侧输入框中的内容输入模板如下：
特别需要注意的就是：路径，这个路径要和代码中新建的路径保持一致，后面会详细介绍。
添加分配权限
点击左侧菜单中的“角色管理”，进入角色管理页面，现在我要修改系统管理员的权限，将新增的菜单展示出来，直接点击“权限分配”，弹出“权限分配”页面。
如果你想要展示的菜单，则需要勾选，如果不想要展示的菜单，则取消勾选，然后点击确定即可。
现在需要退出当前用户，然后重新登录，或者直接刷新网页链接，就可以看到已经添加的页面了。
接下来需要在代码中添加页面路径了。
添加菜单页面代码
在views文件夹中添加相应的文件夹，为了好区分，命名也是很重要的，然后添加一个index.vue文件，则index.vue文件中的代码就是想要添加的菜单中的代码了。
下面需要在router路由中进行添加此页面。
子菜单的添加方式
找到router文件夹，然后找到对应的modules，在对应的路由文件中，加入右侧红框中的内容，有path/component/name/meta等。
父菜单的添加方式
需要在modules文件夹中添加一个路由js文件，然后拷贝其他js文件中的内容进行修改，注意router名称需要更改一下。
然后去router文件夹中的index.js文件中修改以下内容：
- 导入路由文件
- 注册路由文件
注意：
name:对应配置菜单页面的名称（也可以不对应，不影响页面）
path:对应配置菜单页面中的路径（当前的js文件名+path名称 === 路径）
配置完成，菜单页面就添加成功了，接下来就可以处理页面内容及数据了。
以上是 vue-element-admin 添加菜单的步骤记录 的全部内容， 来源链接： utcz.com/z/377607.html
