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

侧边菜单的实现

1.饿了吗NavMenu 导航菜单:

image
传送门:http://element.eleme.io/#/zh-CN/component/menu

//html代码
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff"active-text-color="#ffd04b">
   <el-submenu index="1">
      <!-- 一级菜单 -->
      <template slot="title" class="title">
         <i class="el-icon-location"></i>
         <span>导航一</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="1-1">
         <i class="el-icon-menu"></i>
             选项1
      </el-menu-item>
      <el-menu-item index="1-2">
         <i class="el-icon-menu"></i>
             选项2
      </el-menu-item> -->
   </el-submenu>
</el-menu>

//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需要是累加值，如果没设置点击某个一级菜单，所有二级菜单都展开
 <el-submenu v-for="(item, index) in menuList" :key="item.id" :index="item.order">
    <!-- 一级菜单 -->
    <template slot="title" class="title">
       <i class="el-icon-location"></i>
       <span>{{item.authName}}</span>
    </template>
    <!-- 二级菜单 -->
    <el-menu-item v-for="(it, i) in item.children" :key="it.id" index="1-1">
       <i class="el-icon-menu"></i>
       {{it.authName}}
    </el-menu-item>
 </el-submenu>

Ⅳ.控制台报错解决:

image

Ⅴ.侧边栏路由跳转:

image

image

image

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

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