遍历菜单栏-vue2项目element-ui组件

后台返回的数据格式： 

this.menuslist = res.menus;

 <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#000f16"
          unique-opened
          router
          :default-active="$router.currentRoute.path"
          style="min-height: 100vh"
          @select="changeSidebar"
          text-color="#fff"
          active-text-color="#fff"
        >
          <div class="menuLeft">
            <div class="menu-nav-header">
              <el-image
                style="width: 22px; height: 22px; border-radius: 2px;" :src="logo"></el-image>
              <span style="margin-left: 10px">美育云管理后台</span>
            </div>
          </div>
          <!-- 遍历菜单 -->
          <template v-for="item in menuslist">
            <!-- 含有子菜单 -->
            <template v-if="item.childMenus && item.childMenus.length > 0">
              <!-- 第一层 含有子菜单菜单 -->
              <el-submenu :index="item.url + ''" :key="item.url">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.name }}</span>
                </template>
                <!-- 第二层 子菜单遍历 -->
                <template v-for="subItem in item.childMenus">
                  <!-- 第三层 子菜单含有子菜单 -->
                  <el-submenu
                    v-if="subItem.childMenus && subItem.childMenus.length > 0"
                    :index="subItem.url + ''"
                    :key="subItem.url"
                  >
                    <template slot="title">
                      <i :class="subItem.icon"></i>
                      <span slot="title">{{ subItem.name }}</span>
                    </template>

                    <el-menu-item
                      v-for="(threeItem, i) in subItem.childMenus"
                      :key="i"
                      :index="threeItem.url + ''"
                    >
                      <i :class="threeItem.icon"></i>
                      <span>{{ threeItem.name }}</span>
                    </el-menu-item>
                  </el-submenu>
                  <!-- 子菜单不含子菜单 -->
                  <el-menu-item
                    v-else
                    :index="subItem.url + ''"
                    :key="subItem.url"
                  >
                    <i :class="subItem.icon"></i>
                    <span slot="title">{{ subItem.name }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <!-- 第一层 不含子菜单  -->
            <template v-else>
              <el-menu-item :index="item.url + ''" :key="item.url">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>

 changeSidebar(path) {
      this.$router.push(path);
    },

路由的配置router：

 {
        path: '/vueLayout',
        name: 'vueLayout',
        redirect: '/console',
        component: Layout,
        children: [
            {
                path: "/console",
                name: "console",
                component: () =>
                    import('../pages/console/console.vue'),
                meta: {
                    title: "控制台"
                },
            },
            {
                path: "/customer/index",
                name: "customer",
                component: () =>
                    import('../pages/customer/index.vue'),
                meta: {
                    title: "会员"
                },
            },
            {
                path: "/company/index",
                name: "company",
                component: () =>
                    import('../pages/company/index.vue'),
                meta: {
                    title: "渠道管理"
                },
            },
            {
                path: "/company/audit",
                name: "audit",
                component: () =>
                    import('../pages/company/audit.vue'),
                meta: {
                    title: "渠道审核"
                },
            },
            {
                path: "/company/user",
                name: "user",
                component: () =>
                    import('../pages/company/user.vue'),
                meta: {
                    title: "渠道管理人员"
                },
            },
            {
                path: "/event/project",
                name: "event",
                component: () =>
                    import('../pages/event/project.vue'),
                meta: {
                    title: "项目管理"
                },
            },
            {
                path: "/event/index",
                name: "index",
                component: () =>
                    import('../pages/event/index.vue'),
                meta: {
                    title: "赛事管理"
                },
            },
            {
                path: "/event/sign",
                name: "sign",
                component: () =>
                    import('../pages/event/sign.vue'),
                meta: {
                    title: "报名管理"
                },
            },
            {
                path: "/event/level",
                name: "level",
                component: () =>
                    import('../pages/event/level.vue'),
                meta: {
                    title: "层级管理"
                },
            },
            {
                path: "/event/major",
                name: "major",
                component: () =>
                    import('../pages/event/major.vue'),
                meta: {
                    title: "专业管理"
                },
            },

            {
                path: "/event/company",
                name: "major",
                component: () =>
                    import('../pages/event/company.vue'),
                meta: {
                    title: "渠道管理"
                },
            },
            {
                path: "/order/index",
                name: "order",
                component: () =>
                    import('../pages/order/index.vue'),
                meta: {
                    title: "订单管理"
                },
            },
            {
                path: "/order/settlement",
                name: "settlement",
                component: () =>
                    import('../pages/order/settlement.vue'),
                meta: {
                    title: "结账管理"
                },
            },
            {
                path: "/sys/baseconfig",
                name: "baseconfig",
                component: () =>
                    import('../pages/sys/baseconfig.vue'),
                meta: {
                    title: "参数配置"
                },
            },

            {
                path: "/sys/payconfig",
                name: "payconfig",
                component: () =>
                    import('../pages/sys/payconfig.vue'),
                meta: {
                    title: "支付配置"
                },
            },
            {
                path: "/sys/role",
                name: "role",
                component: () =>
                    import('../pages/sys/role.vue'),
                meta: {
                    title: "角色管理"
                },
            },
            {
                path: "/sys/user",
                name: "user",
                component: () =>
                    import('../pages/sys/user.vue'),
                meta: {
                    title: "人员管理"
                },
            },
        ]
    },