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

效果图：

<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 -->
      <!-- 1 对应了el-submenu index="1"
           2 对应了el-submenu index="2" -->
      <!-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项-->
     <!--  :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
     <!-- default-opened 当前打开的 sub-menu 的 index 的数组 如果设置为['1']死值，跳转路由后其他已开打的 sub-menu 会缩起来，设置成变量则不会-->
     <!-- default-active 当前激活菜单的 index 设置成 $route.path 当前激活菜单会高亮-->
      <el-menu :default-openeds="openList" :router="true" :default-active="$route.path">
        <!-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index -->
        <!-- 因为i是从0开始的 所以需要加1 -->
        <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>
          <!-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 -->
          <!-- 因为子选项也是一个数组所以需要再次循环 -->
          <!-- :index="'/index/'+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 -->
          <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>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</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>