侧边菜单的实现
1.饿了吗NavMenu 导航菜单:
http://element.eleme.io/#/zh-CN/component/menu
//html代码
导航一
选项1
选项2
-->
//css代码
.el-aside {
background-color: #545c64;
color: #333;
text-align: center;
line-height: 200px;
.el-menu-vertical-demo {
border: none;
}
//先将scoped去掉,不然权重不够修改不了样式
//设置折叠菜单的样式
.el-submenu__title {
text-align: left;
}
}
2.根据接口动态生成权限菜单
Ⅰ.关于权限:
后台会告诉你帐号对应的菜单:调接口→拿数据→渲染页面
调用需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
Ⅱ.如何在axios发送请求的时候，添加配置信息https://github.com/axios/axios
//created获取初始化数据渲染页面
created(){
this.$axios.get('menus',{
headers:{
Authorization:window.sessionStorage.getItem('token')
}
}).then(res=>{
// console.log(res);
this.menuList = res.data.data;
})
}
Ⅲ.获取到数据渲染到页面
//JS代码，将获取的数据存入menuList
data(){
return{
menuList:[]
}
}
//html代码，渲染到页面
//index需要是累加值，如果没设置点击某个一级菜单，所有二级菜单都展开
{{item.authName}}
{{it.authName}}
Ⅳ.控制台报错解决:
Ⅴ.侧边栏路由跳转:
点击跳转的路由地址也是后台设置好返回给我们，这个需要沟通确认好
