vue+element构建后台管理主页侧边导航栏

效果图：

注释:

<template>  <el-container style="height: 100vh; border: 1px solid #eee">    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">      <el-menu :default-openeds="['1']" :router="true">        <el-submenu :index="(i+1).toString()" v-for="(v,i) in navList" :key="i">          <template slot="title"><i class="el-icon-menu"></i>{{v.authName}}</template>          <el-menu-item :index="'/index/'+item.path" v-for="(item,index) in v.children" :key="index">{{item.authName}}</el-menu-item>        </el-submenu>      </el-menu>    </el-aside>
</template>


<script>
import axios from 'axios'
export default {
  data() {
    return {
      navList:[],
      openList:['1']
    };
  },
  created:function(){
    this.getNavList();
  },
  methods:{
    getNavList:function(){
      axios.get('',{
        // 登录成功后会将token存入本地缓存，
        headers:{
          'Authorization':localStorage.token
        }
      })
      .then(res=>{
        console.log(res)
        let {data,meta} = res.data;
        /* 数据获取成功 */
        if(meta.status==200){
          this.navList = data;
        }else{
          /* 防止数据获取失败，给出相应的后台提示 */
          this.$message.error(meta.msg)
        }
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }
};
</script>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>