<el-menu
        class="el-menu-vertical-demo"
        background-color="#001529"
        text-color="#fff"
        active-text-color="skyblue"
        :unique-opened="true"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
        :default-active="activePath"
      >
        <template v-for="item in menuList">
          <!-- 一级菜单，存在在子菜单且子菜单大于1，或者为关闭状态 -->
          <!--isCollapse为导航栏的收起展开状态，为了不影响收起状态效果所以需要加个||判断-->
          <template
            v-if="item.children && item.children.length > 1 || isCollapse"
          >
            <el-submenu :key="item.id" :index="item.path + ''">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.label }}</span>
              </template>
              <el-menu-item
                :index="subItem.path + ''"
                v-for="subItem in item.children"
                :key="subItem.id"
                @click="saveNavState(subItem)"
              >
                <i :class="subItem.icon"></i>{{ subItem.label }}
              </el-menu-item>
            </el-submenu>
          </template>
          <!-- 子菜单只有一项时执行 -->
          <template v-else>
            <el-menu-item
              :index="subItem.path + ''"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="saveNavState(subItem)"
            >
              <i :class="item.icon"></i>{{ subItem.label }}
            </el-menu-item>
          </template>
        </template>
      </el-menu>

一般导航菜单都是后台获取的一个数组，所以需要用到循环，当子菜单时有多个菜单时正常循环，当只有一个菜单时直接循环二级菜单