一宾舅、首先自己寫一個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渗蟹，然后創(chuàng)建一個自定義組件home-left块饺，將我們的leftMenus傳給home-left這個子組件

這里要注意:default-active，這個屬性意思是哪一個菜單處于高亮狀態(tài)雌芽，在這里我們可以根據路由來匹配授艰，如果不這樣做，當我們在已經選擇界面刷新的時候膘怕，那么已經選擇的菜單則不會處于高亮狀態(tài)

    <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>