自己整了一个 后台管理 侧边栏递归渲染

父组件

<template>
  <el-menu
    :default-active="$route.path"
    background-color="#232c3b"
    text-color="#A0ACB9"
    active-text-color="#fff"
    router
    unique-opened
  >
    <MenuItem :list="routes" />
  </el-menu>
</template>

<script>
import { mapState } from 'vuex'
import MenuItem from './menu_item.vue'

export default {
  components: { MenuItem },
  data() {
    return {}
  },
  methods: {},
  computed: {
    ...mapState({ routes: (state) => state.routes.allowRoutes })
  }
}
</script>

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

 

递归的子组件

 

<template>
  <div>
    <template v-for="item in list">
      <!-- 子元素需要递归的 渲染这个递归元素 -->
      <el-submenu
        :index="item.children[0].path"
        v-if="hasMoreOneChild(item) || childChildren(item)"
        :key="item.path"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.meta.name || 'no-name' }}</span>
        </template>

        <MenuItem :list="item.children" />
      </el-submenu>

      <!-- 没有子元素 或者子元素只有一个, 且子元素的一个的子元素的childre没有或者只有一个 -->
      <el-menu-item
        :index="
          item.children && item.children[0] ? item.children[0].path : item.path
        "
        v-else
        :key="item.path"
      >
        <i class="el-icon-setting"></i>
        <span slot="title">{{
          item.children && item.children[0]
            ? item.children[0].meta.name
            : item.meta.name
        }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    list: Array
  },
  data() {
    return {}
  },
  methods: {
    // 判断item是否不止一个子节点
    // 有子节点, 且子节点的个数大于零的时候, 需要调用递归
    hasMoreOneChild(item) {
      if (item.children && item.children.length > 1) {
        return true
      }
      return false
    },

    // 当节点的  子元素  的子元素的  children 大于零时, 也需要递归渲染
    childChildren(item) {
      if (
        item.children &&
        item.children[0] &&
        item.children[0].children &&
        item.children[0].children.length > 0
      ) {
        return true
      }
      return false
    }
  }
}
</script>

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

 

遍历的路由

 

import Layout from '@/components/layout/index.vue'
export default [
  /**
   * 这里的路由是用来 侧边栏组件 递归 用的
   * 递归的条件是 当前路由有子路由 且 子路由的长度大于1 或者 当前路由的子路由的长度 为 1, 且 子路由的子路由 存在 且 长度不为0
   * 使用注意: 如果当前路由只有一个子路由, 会优先取子路由的 meta 中的 name 作为侧边栏的名字
   * 如果子路由的子路由的children的长度大于 0, 那么会直接取当前路由的 meta 中的 name
   * 所以: 当子路由有一个以上时, 必须 给当前路由设置 meta中的name属性
   * nochche: 为true 时不添加缓存, notag 为 true 时, 不添加标签
   */
  // 数据台
  {
    path: '/dashboard',
    component: Layout,
    meta: {
      name: '数据台'
    },
    children: [
      {
        path: '/dashboard',
        component: () => import('@/views/dashboard/dashboard.vue'),
        meta: {
          name: '数据台'
        }
      }
    ]
  },

  // 空调管理
  {
    path: '/air_conditioning',
    component: Layout,
    meta: {
      name: '空调管理'
    },
    children: [
      {
        path: '/device_list',
        component: () => import('@/views/air_conditioning/device/device.vue'),
        meta: {
          name: '空调列表'
        }
      },
      {
        path: '/imei_list',
        component: () => import('@/views/air_conditioning/IMEI/IMEI.vue'),
        meta: {
          name: 'IMEI列表'
        }
      }
    ]
  },

  // 智控管理
  {
    path: '/intelligent_control',
    component: Layout,
    children: [
      {
        path: '/intelligent_control',
        component: () =>
          import('@/views/intelligent_control/intelligent_control.vue'),
        meta: {
          name: '智控管理'
        }
      }
    ]
  },

  // 定额管理
  {
    path: '/quota',
    component: Layout,
    children: [
      {
        path: '/quota',
        component: () => import('@/views/quota/quota.vue'),
        meta: {
          name: '定额管理'
        }
      }
    ]
  },

  // 运营商管理
  {
    path: '/operator',
    component: Layout,
    children: [
      {
        path: '/operator',
        component: () => import('@/views/operator/operator.vue'),
        meta: {
          name: '运营商管理'
        }
      }
    ]
  },

  // 系统日志
  {
    path: '/system_log',
    name: 'system_log',
    component: Layout,
    children: [
      {
        path: '/system_log',
        component: () => import('@/views/system_log/system_log.vue'),
        meta: {
          name: '系统日志'
        }
      }
    ]
  },

  // 账号管理
  {
    path: '/account',
    component: Layout,
    children: [
      {
        path: '/account',
        component: () => import('@/views/account/account.vue'),
        meta: {
          name: '账号管理'
        }
      }
    ]
  },

  // 设备报修
  {
    path: '/device_repair',
    component: Layout,
    children: [
      {
        path: '/device_repair',
        component: () => import('@/views/device_repair/device_repair.vue'),
        meta: {
          name: '设备报修'
        }
      }
    ]
  }
]

 

 

/******** 写这个的原因是因为, 真的想学好前端的话, 就不要依赖别人的玩具框架进行二次开发, 没有什么比自己动手, 感悟更深 **********/

 

本想把生活活成一首诗, 时而优雅 , 时而豪放 , 结果活成了一首歌 , 时而不靠谱 , 时而不着调