Vue组件递归使用生成侧边栏

基本思路：根据路由信息生成侧边栏，由于路由信息是嵌套格式，会有多层嵌套，如果直接使用组件v-for指令来实现，需要多级的for循环嵌套，如果后台改变路由信息，则会更加麻烦。

组件是可以递归的！（没想到吧）

到底我该咋使用递归？？？

别慌别慌，下面代码就是一个实例：（一看就会，一写就...）

一个垃圾路由表：

leftMenu: [{
        "title": "工作台",
        "path": "/home",
        "icon": "el-icon-house",
        "children": [],
        id: 1
      }, {
        "title": "借贷管理",
        "path": "/debitManage",
        "icon": "el-icon-money",
        id: 1,
        "children": [{
            "title": "提交借款初审",
            "path": "/debitManage/firstCon",
            id: 1,
            "children": [{
              "title": "新增借款",
              "path": "/debitManage/addDebitItem",
              name: "addDebitItem",
              id: 1,
              "children": []
            }, {
              "title": "新标维护",
              "path": "/debitManage/upholdNewBidItems",
              name: "addDebitItem",
              id: 1,
              "children": []
            }, {
              "title": "借款审核",
              "path": "/debitManage/firstDebitCon",
              name: "addDebitItem",
              id: 1,
              "children": []
            }]
          }, {
            "title": "上架管理",
            id: 1,
            "path": "/debitManage/secondCon",
            "children": [{
              "title": "上架初审",
              "path": "/debitManage/firstLevelAuditItems",
              name: "addDebitItem",
              id: 1,
              "children": []
            }, {
              "title": "标的上架",
              "path": "/debitManage/secondBidsGroundItems",
              name: "addDebitItem",
              id: 1,
              "children": [

              ]
            }, {
              "title": "进行中的标管理",
              "path": "/debitManage/runningBidsItems",
              name: "addDebitItem",
              id: 1,
              "children": []
            }]
          },
          {
            "title": "复审管理",
            "path": "/debitManage/thridCon",
            id: 1,
            "children": [{
              "title": "满标复审",
              "path": "/debitManage/reexAuditItems",
              name: "addDebitItem",
              id: 1,
              "children": []
            }]
          }, {
            "title": "记录查看",
            "path": "/debitManage/viewLogs",
            id: 1,
            "children": [{
              "title": "所有借款标",
              "path": "/debitManage/debitItems",
              name: "addDebitItem",
              id: 1,
              "children": []
            }, {
              "title": "投资记录",
              "path": "/debitManage/investRecords",
              name: "addDebitItem",
              id: 1,
              "children": []
            }]
          }, {
            "title": "管理标类别",
            "path": "/debitManage/manageCategory",
            id: 1,
            "children": [{
              "title": "借款标类别",
              "path": "/debitManage/debitCategory",
              name: "addDebitItem",
              id: 1,
              "children": []
            }]
          }

        ]
      }, {
        "title": "还款管理",
        "path": "/repaymentManage",
        "icon": "el-icon-bank-card",
        id: 1,
        "children": [{
            "title": "管理还款项",
            "path": "/repaymentManage/repaymentItems",
            name: "addDebitItem",
            id: 1,
            "children": []
          },
          {
            "title": "还款记录",
            "path": "/repaymentManage/repaymentRecords",
            name: "addDebitItem",
            "children": [],
            id: 1
          }
        ]
      }, {
        "title": "资金管理",
        "path": "/capitalManage",
        id: 1,
        "icon": "el-icon-wallet",
        "children": [{
          "title": "记录查看",
          "path": "/capitalManage/logsView",
          id: 1,
          "children": [{
            "title": "充值记录",
            "path": "/capitalManage/reChargeLog",
            id: 1,
            name: "addDebitItem",
            "children": []
          }, {
            "title": "提现记录",
            "path": "/capitalManage/withDrawMoneyLog",
            id: 1,
            name: "addDebitItem",
            "children": []
          }, {
            "title": "用户资金",
            "path": "/capitalManage/userCapital",
            name: "addDebitItem",
            id: 1,
            "children": []
          }, {
            "title": "平台资金",
            "path": "/capitalManage/platformCapitalLog",
            name: "addDebitItem",
            id: 1,
            "children": []
          }]
        }, {
          "title": "相关审核",
          "path": "/capitalManage/withDrawConfirm",
          id: 1,

          "children": [{
            "title": "提现审核",
            "path": "/capitalManage/withDrawCon",
            id: 1,
            name: "addDebitItem",
            "children": []
          }]
        }]
      }, {
        "title": "会员管理",
        "path": "/memberManage",
        "icon": "el-icon-user-solid",
        id: 1,
        "children": [{
            "title": "新增借款用户",
            "path": "/memberManage/addDebitUser",
            name: "addDebitItem",
            id: 1,
            "children": []
          },
          {
            "title": "投资用户管理",
            "path": "/memberManage/investUserManage",
            name: "addDebitItem",
            id: 1,
            "children": []
          },
          {
            "title": "借款用户管理",
            "path": "/memberManage/debitUserManage",
            name: "addDebitItem",
            id: 1,
            "children": []
          }
        ]
      }, {
        "title": "内容管理",
        "path": "/contentManage",
        "icon": "el-icon-s-grid",
        id: 1,
        "children": [{
            "title": "轮播管理",
            "path": "/contentManage/sliderManage",
            id: 1,
            "children": [{
              "title": "新增轮播",
              "path": "/contentManage/sliderManage/addSliderItem",
              "children": [],
              id: 1
            }]
          },
          {
            "title": "文章管理",
            "path": "/contentManage/articleManage",
            id: 1,
            "children": [{
              "title": "新增文章",
              "path": "/contentManage/articleManage/addArticleItem",
              "children": [],
              id: 1,
            }]
          },
          {
            "title": "意见反馈",
            "path": "/contentManage/feedBack",
            id: 1,
            "children": [{
              "title": "反馈处理",
              "path": "/contentManage/feedbackManage/addFeedbackItem",
              "children": [],
              id: 1,
            }, ]
          }
        ]
      }],

父级组件：

<template>
  <div class="leftMenu">
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="false"
      :router="true"
      :unique-opened="true"
      :default-active="$route.path"
      active-text-color="#ffffff"
    >
      <ActMenu :list="menuData"></ActMenu>
    </el-menu>
  </div>
</template>

<script>
import ActMenu from "@/Layout/home/menu/ActMenu";
import { mapGetters } from "vuex";
export default {
  name: "LeftMenu",
  components: { ActMenu },
  computed: {
    ...mapGetters(["getMenuData"])
  },
  data() {
    return {
      menuData: this.getMenuData
    };
  },
  created() {
    //根据用户权限获取路由,当前是管理员
    // console.log(this.$route.path);
    this.menuData = this.getMenuData;
  }
    
};
</script>

<style scoped>
.logo {
  width: 100%;
}
.logo > img {
  width: 60%;
  margin: auto;
}
.el-radio-group {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
.leftMenu,
.leftMenu > ul {
  position: relative;
  box-sizing: border-box !important;
  overflow: hidden;
}
.leftMenu {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.leftMenu ul {
  box-shadow: 4px 0 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  height: 100% !important;
  background-color: rgb(33, 38, 60);
}
.el-menu > div {
  width: 200px !important;
}
</style>

 子组件ActMenu.vue:

<template>
  <div>
    <!-- 根据实际情况修改 -->
    <div v-for="item in list" :key="item.index">
      <el-menu-item
        v-if="
          item.children == null ||
            item.children.length === 0 ||
            item.path === '/home'
        "
        :index="item.path"
      >
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <el-submenu
        v-if="
          item.children != null &&
            item.path !== '/home' &&
            item.children.length > 0
        "
        :index="item.path"
        class="secondMenu"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <ActMenu :list="item.children"></ActMenu>
      </el-submenu>
    </div>
  </div>
</template>
<script>
export default {
  name: "ActMenu",
  props: {
    list: Array
  }
};
</script>
<style scoped>
.el-menu--inline li {
  background-color: rgb(20, 22, 34);
}
.el-menu--inline li:hover,
.el-submenu__title:hover {
  background-color: rgb(57, 62, 83) !important;
}
</style>

(其中判断可能不是很适用，要视情况修改，ui框架使用的是elementui)