Vue.js+Element-ui多级导航

首先明确目标，按照elementui官方的demo，多级水平导航的代码如下：

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>

以上的demo为三级导航，出于需求的考虑，导航的数据最好是动态的数据，即从后端获得到的json数据。

所以，在elementUI官方的demo下，做动态导航。不管实现的思路是如何，但是有一点可以明确，我们动态导航最终的代码需和上面的demo代码一样，所以，开始动手吧。
（VUE的路由或者其他此处都省略，只上动态导航的核心代码）
##step1：创建一个Nav组件和NavItem组件。
##step2：Nav组件代码为：

<template>
  <el-menu router unique-opened :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <template v-for="(item, index) in nav">
      <nav-item :key="index" :item="item" :nav-index="index"></nav-item>
    </template>
  </el-menu>
</template>

释：
1.Nav组件调用了NavItem组件，并向子组件传递了数据item和nav-index,(细心看代码的人，可能发现我为什么用了一个template标签，原本我不用template标签时，把v-for表达式放在使用时，一触发多级导航的时候就会报：Maximum call stack size exceeded栈溢出)
2.:default-active=“activeIndex”:因为添加了router属性，所以，可以通过导航的index定位导航，最终返回一个导航的path即可。

activeIndex() {
        return this.$route.path
      }

##step3:NavItem组件的代码为：

<template>
  <!--1.//如果当前存在子节点-->
  <el-submenu v-if="item.children && item.children.length" :index="navIndex"
              :class="{avatar:item.title.length == 0 ? true:false }">
    <template slot="title" v-if="item.title">{{item.title}}</template>
    <template slot="title" v-else>
      <el-avatar :size="52" shape="square" :src="item.img"></el-avatar>
    </template>
    <!--递归自身，直到再无子节点-->
    <template v-for="(subItem, subIndex) in item.children">
      <nav-item :key="navIndex+'-'+subIndex" :item="subItem" :nav-index="navIndex+'-'+subIndex"></nav-item>
    </template>
  </el-submenu>
  <!--2.如果当前不存在子节点-->
  <el-menu-item :index="item.path" v-else>{{item.title}}</el-menu-item>
</template>

释：NavItem组件一进来会先使用v-if判断当前数据是否存在子数据（即children）,如果存在1代码，因为可能会存在三级或者四级导航，所以，使用了递归组件，判断是否存在多级导航，如果存在则递归，否则，退出执行2代码。

动态多级导航，核心的思路就是递归组件（如果你不使用递归组件，也可以自己判断，看你个人喜欢的），
最终我们调用Nav组件的时候，就可以渲染出入demo的例子了，效果图：

动态多级导航数据：

{
  "code": "200",
  "msg": "success",
  "data": [
    {
      "title": "首页",
      "path": "/home"
    },
    {
      "title": "文章分类",
      "children": [
        {
          "title": "JAVA",
          "path": "/aCategory/java"
        },
        {
          "title": "VUE.JS",
          "path": "/aCategory/vue.js",
          "children": [
            {
              "title": "VUEROUTER",
              "path": "/aCategory/vue.js/vuerouter",
              "children": [
                {
                  "title": "vue-test",
                  "path": "/aCategory/vue.js/vuerouter/test"
                }
              ]
            }
          ]
        },
        {
          "title": "JAVASCRIPT",
          "path": "/aCategory/javascript"
        },
        {
          "title": "HTML+CSS",
          "path": "/aCategory/html_css"
        }
      ]
    },
    {
      "title": "关于",
      "path": "/about"
    },
    {
      "title": "留言",
      "path": "/message"
    },
    {
      "title":"",
      "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582976911553&di=0f3c1c8f5e08a5b2bbb2ea8b2b6488a5&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F317278a608ea285fd09a9ac0270324ba2ef64ee0229b-FRFK1i_fw658",
      "children": [
        {
          "title": "基本信息",
          "path": "/mine/baseInfo"
        }
      ]
    }
  ]
}