vue+elementUI使用递归实现左侧导航栏

一、首先自己写一个JSON文件，这个JSON文件就是我们需要的分类的列表。例如：

const menuList = [
  {
    title : '用户管理',
    key : '/user',
    icon : 'el-icon-user-solid',
  },
  {
    title : '商品',
    key : '/products',
    icon : 'el-icon-s-goods',
    children : [
      {
        title : '品类管理',
        key : '/category',
        icon : 'bars',
      },
      {
        title : '商品管理',
        key : '/product',
        icon : 'tool',
      }
    ]
  },
  {
    title : '用户管理',
    key : '/userss',
    icon : 'user',
  },
  {
    title : '角色管理',
    key : '/role',
    icon : 'safety'
  },
  {
    title : '图形图表',
    key : '/charts',
    icon : 'area-chart',
    children: [
      {
        title : '柱线图',
        key : '/charts/bar',
        icon : 'bar-chart'
      },
      {
        title : '折线图',
        key : '/charts/line',
        icon : 'line-chart'
      },
      {
        title : '饼图',
        key : '/charts/pie',
        icon : 'pie-chart'
      },
    ]
  },
]

export default menuList

二、首先在home组件使用element布局模板，然后引入我们刚才定义的json文件，并且定义给data中的leftMenus，然后创建一个自定义组件home-left，将我们的leftMenus传给home-left这个子组件

这里要注意:default-active，这个属性意思是哪一个菜单处于高亮状态，在这里我们可以根据路由来匹配，如果不这样做，当我们在已经选择界面刷新的时候，那么已经选择的菜单则不会处于高亮状态

    <el-container>
      <el-aside>
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <home-left :navMenus="leftMenus"/>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view/>
        </el-main>

<script>
import menuList from '../../util/menuConfig'
export default {
    components: {HomeLeft},
    data() {
      return {
        leftMenus: menuList,
      }
    }
}
</script>

三、在子组件中我们需要使用props来接受传递过来的数据，并且在template中把遍历的children值再传递给自己这个组件，递归调用自己组件。这里的:index是唯一标志，:route是路由路径

<template>
  <div class="navMenu">
    <label v-for="navMenu in navMenus">
      <!--只有一级菜单-->
      <el-menu-item v-if="!navMenu.children"
                    :index="navMenu.key"
                    :route="navMenu.key"
      >
        <!--图标-->
        <i :class="navMenu.icon"></i>
        <!--标题-->
        <span slot="title">{{navMenu.title}}</span>
      </el-menu-item>
      <!--有多级菜单-->
      <el-submenu v-if="navMenu.children"
                  :key="navMenu.key"
                  :index="navMenu.key"
      >
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{navMenu.title}}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>

  </div>
</template>

<script>
  export default {
    name: 'NavMenu', //使用递归组件必须要有
    props: ['navMenus'], // 传入子组件的数据
    data() {
      return {}
    },
    methods: {
      handleSelect(key,keyPath){
        console.log('1212')
        console.log(key,keyPath)
      }
    }
  }
</script>

<style scoped>

</style>