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

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