Vue.js + Element-ui multi-level navigation

首先明确目标，按照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 is three or more navigation considerations demand, dynamic navigation data is preferably data that is obtained from the rear end to the json data.

Therefore, in elementUI official demo, do dynamic navigation. Regardless of how the ideas to achieve, but one thing is clear, we need dynamic navigation final code and demo code as above, so it started working.
(VUE or other routes here are omitted, and only the dynamic navigation core code)
## step1: Create a Nav NavItem components and assemblies.
## step2: Nav assembly code is:

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

Explanation:
When 1.Nav component called NavItem components, sub-assemblies and transfer data item and nav-index, (careful look at the code of people, might find out why I used a template tag, I had no template tag, the v -for expression when placed in use, when a trigger multi-level navigation will be reported: Maximum call stack size exceeded stack overflow)
2.:default-active="activeIndex ": because adding a router attributes, so you can navigate through the index positioning and navigation, a navigation path eventually return to.

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

## step3: Code NavItem component are:

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

Explanation: NavItem assembly will first come using a v-if data is present is determined whether the current sub data (i.e. Children), 1 if the code exists, because there may be three or four navigation, therefore, a recursive component is determined whether there multi-level navigation, if there is a recursive, otherwise, to withdraw from the 2 code.

Dynamic multi-level navigation, the core idea is recursive components (if you do not use recursion component, you can judge for yourself, look at your personal favorite),
and eventually we call the Nav components when you can example out demo of rendering, renderings :

dynamic multi-level navigation data:

{
  "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"
        }
      ]
    }
  ]
}