vue和ele实现后台侧边栏递归动态加载

父组件

<template>
  <div>
    <el-menu
      :router="true"
      background-color="#001529"
      text-color="#fff"
      class="navleft"
      //这个是刷新页面保持菜单栏选中状态
       :default-active="this.$route.path"
      unique-opened>
      <!-- 先循环数组，然后把每一项的值给传到子组件内  因为不能直接传数组，要传值 -->
      <menus v-for="(item,index) in menuData" :key="index" :menu="item" />
    </el-menu>
  </div>
</template>
<script>
import menus from "./navitem";
export default {
    
    
  data() {
    
    
    return {
    
    
      menuData: [
        {
    
    
          id: 1,
          path: "/a",
          name: "AdminIndex",
          nameZh: "首页",
          iconCls: "el-icon-s-home",
          component: "AdminIndex",
          parentId: 0,
          children: null
        },
        {
    
    
          id: 2,
          path: "/admin",
          name: "User",
          nameZh: "用户管理",
          iconCls: "el-icon-user",
          component: "AdminIndex",
          parentId: 0,
          children: [
            {
    
    
              id: 6,
              path: "/admin/user/profile",
              name: "Profile",
              nameZh: "用户信息",
              iconCls: null,
              component: "user/UserProfile",
              parentId: 2,
              children: null
            },
            {
    
    
              id: 7,
              path: "/admin/user/role",
              name: "Role",
              nameZh: "角色配置",
              iconCls: null,
              component: "user/Role",
              parentId: 2,
              children: null
            }
          ]
        },
        {
    
    
          id: 3,
          path: "/d",
          name: "Content",
          nameZh: "内容管理",
          iconCls: "el-icon-tickets",
          component: "AdminIndex",
          parentId: 0,
          children: [
            {
    
    
              id: 9,
              path: "/d/content/department",
              name: "Department",
              nameZh: "就业部类",
              iconCls: null,
              component: "content/department",
              parentId: 3,
              children: null
            },
            {
    
    
              id: 10,
              path: "/d/content/student",
              name: "Student",
              nameZh: "学生类",
              iconCls: null,
              component: "content/student",
              parentId: 3,
              children: [
                {
    
    
                  id: 20,
                  path: "/d/content/student/graduateInfo",
                  name: "graduateInfo",
                  nameZh: "毕业生信息",
                  iconCls: null,
                  component: "content/student/graduateInfo",
                  parentId: 10,
                  children: null
                }
              ]
            },
            {
    
    
              id: 11,
              path: "/d/content/enterprise",
              name: "Enterprise",
              nameZh: "企业类",
              iconCls: null,
              component: "content/enterprise",
              parentId: 3,
              children: null
            }
          ]
        },
        {
    
    
          id: 4,
          path: "/n",
          name: "System",
          nameZh: "系统管理",
          iconCls: "el-icon-s-tools",
          component: "AdminIndex",
          parentId: 0,
          children: [
            {
    
    
              id: 12,
              path: "/n/system/run",
              name: "Run",
              nameZh: "运行情况",
              iconCls: null,
              component: "system/run",
              parentId: 4,
              children: null
            },
            {
    
    
              id: 13,
              path: "/n/system/data",
              name: "Data",
              nameZh: "备份恢复数据库",
              iconCls: null,
              component: "system/data",
              parentId: 4,
              children: null
            },
            {
    
    
              id: 14,
              path: "/n/system/log",
              name: "Log",
              nameZh: "操作日志",
              iconCls: null,
              component: "system/log",
              parentId: 4,
              children: null
            }
          ]
        },
        {
    
    
          id: 5,
          path: "/admin1",
          name: "Link",
          nameZh: "链接",
          iconCls: null,
          component: "AdminIndex",
          parentId: 0,
          children: null
        }
      ]
    };
  },
  components: {
    
    
    menus
  }
};
</script>
<style lang="scss" scoped>
.navleft {
    
    
  overflow: hidden;
}
.navtitle {
    
    
  color: #fff;
  font-size: 18px;
}
/deep/.el-menu {
    
    
  border-right: none;
}
</style>

子组件

<template>
  <div>
    <!-- 无子集 -->
    <!-- index放url可以在路由开始后直接点击跳转，不需要在一个个设置
    因为这边是数据path对应的跳转路由
    -->
    <el-menu-item v-if="!menu.children" :index="menu.path">
      <!-- <i :class="menu.icon"></i> -->
      <span slot="title">{
    
    {
    
    menu.name}}</span>
    </el-menu-item>
    <!-- 有子集 -->
    <!-- index放url可以在路由开始后直接点击跳转，不需要在一个个设置
     因为这边是数据path对应的跳转路由
    -->
    <el-submenu v-else :index="menu.path">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{
    
    {
    
    menu.name}}</span>
      </template>
      <menus v-for="(item,index) in menu.children" :menu="item" :key="index"></menus>
    </el-submenu>
  </div>
</template>
<script>
export default {
    
    
  name: "menus",
  props: ["menu"]
};
</script>

<style lang="scss" scoped>
</style>

// 1，后端给个导航栏的数据
// 2，创建一个子组件并注册在父组件内
// 3，在父组件创建一个空数组，利用生命周期加载后自动把后端的数据存到空数组内。
// 4，把父组件的数组传给子组件，因为不能直接传数组，要传值，所以通过在父组件内的子组件上for循环把每一项作为值传过去。
// 5，子组件判断用不用submenu，用v-if判断，条件是接收到的数组也就是menu（代表每一项）是否有children（子级）,有就用submenu没有就item。
// 6，子组件内index用menu.url。因为开启路由模式为true后可以让index内的地址直接用于跳转，免得后期一个个加。
// 7，子组件内submenu内放子组件(name名字)自己调用自己，渲染出二级菜单，想要自己调用自己，需要给组件一个name取名字，用名字当标签名渲染。

//整理：通过获取后端数据到数组，然后循环数组把内容渲染到页面，中间通过if看有无子级 判断有就submenu(二级菜单)没有就直接渲染(一级菜单)。

参考链接