Vue 后台管理项目8-侧边菜单的实现

侧边菜单的实现

1.饿了吗NavMenu 导航菜单:

image

传送门: 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发送请求的时候，添加配置信息

image

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需要是累加值，如果没设置点击某个一级菜单，所有二级菜单都展开
 
    
    
    
    
       
       {{it.authName}}
    
 

Ⅳ.控制台报错解决:

image

Ⅴ.侧边栏路由跳转:

image

image

image

点击跳转的路由地址也是后台设置好返回给我们，这个需要沟通确认好

本文同步发表在我的个人博客：https://www.lubaojun.com/