通过Vue编写一个二级，并且是可以折叠的导航菜单

思路

在侧边栏区域只写了一个二级导航，通过axios获取到侧边栏的数据，通过v-fot循环渲染该数据，形成多个二级菜单
使用elemen-ui进行样式的设置

在main.js中 配置axios

1. 导入axios包
2. 配置请求的根路径
3. 把axios包挂载到vue原型对象上：这样每一个vue组件都可以通过this直接访问到$http，从而去发起ajax请求

// 导入axios包
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 把axios包挂载到vue原型对象上
Vue.prototype.$http = axios

4. 在全局使用axios，结合 vue-axios使用

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

导入element样式

plugins文件夹下的element.js文件：
进行按需导入，用到了element-ui中的什么样式就导入什么样式

import Vue from 'vue'
import {
  Main,
  Menu,
  Submenu,
  MenuItem
} from 'element-ui'

// 注册组件
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)

Home.vue实现静态页面、样式及功能

获取到的菜单数据：

实现方式：

以第一个二级菜单为例：

实现左侧二级菜单的代码：
home.vue文件：

<!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <!-- 一级菜单 -->
          <!-- 在获取到“左侧菜单”的数据后， 使用 v-for循环 渲染 一级菜单 -->
          <!-- :index="item.id + ''" index的值是用于区分不同导航的，每个一级导航都有一个自己的index值 -->
          <!-- "item.id + '' ；数值 + 空字符串 得到的是 字符串 （index的值必须是字符串类型的）
                : 表示 动态数据绑定, 操作一个二级惨淡，不会影响另一个二级菜单
           -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>{{ item.authName }}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item
              :index="subItem.id + ''"
              v-for="subItem in item.children"
              :key="subItem.id"
            >
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>{{ subItem.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>

一级菜单使用的是阿里的图标库，二级菜单使用的是element-ui的图标

home.vue文件

<el-container>
      <!-- 侧边栏区域 -->
      <!-- isCollapse 是否折叠也决定了侧边栏的宽度 -->
      <!-- 折叠 true，侧边栏的宽度是64px
           展开 false（默认），侧边栏的宽度是200px
       -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- toggle-button按钮 是 用于 设置 左菜单栏折叠展开的 -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>

        <!-- 侧边栏菜单区域 -->

        <!-- unique-opened 只保持一个子菜单 -->
        <!-- unique-opened 与  :unique-opened="true" 是等效的
             加上 冒号: ， true false 就是布尔值
             不加 冒号: ， true false 就是字符串 
        -->

        <!-- collapse 设置 折叠 或 展开 
              * 值为true， 折叠
              * 值为false，展开
        -->

        <!-- collapse-transition 是否取消 折叠动画
             取消折叠动画后，效果会更好
        -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409eff"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <!-- 一级菜单 -->
          <!-- 在获取到“左侧菜单”的数据后， 使用 v-for循环 渲染 一级菜单 -->
          <!-- :index="item.id + ''" index的值是用于区分不同导航的，每个一级导航都有一个自己的index值 -->
          <!-- "item.id + '' ；数值 + 空字符串 得到的是 字符串 （index的值必须是字符串类型的）
                : 表示 动态数据绑定, 操作一个二级惨淡，不会影响另一个二级菜单
           -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconsObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{ item.authName }}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item
              :index="subItem.id + ''"
              v-for="subItem in item.children"
              :key="subItem.id"
            >
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span>{{ subItem.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>Main</el-main>
    </el-container>

<style>
// 左侧菜单栏折叠展开按钮 的 样式
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  // 设置内容|||之间的距离
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>