Vue中ElementUI多级导航菜单动态加载——递归

在前后端分离项目中，前端要实现根据后端传来的json格式数据，进行多级导航菜单的动态加载，层级数目较小或者各个层级的数目固定情况下，可以编辑固定数目的父子导航组件，与后端数据对应方可。但是，后期需要调整菜单父子关系或者说动态增删菜单，会导致菜单数据层级关系不确定，比如说某一个层级菜单有2个子菜单，而与之同级的菜单有非2个子菜单，这就不能按照之前固定格式的代码进行渲染了，可以借助递归思想，将动态加载导航菜单的代码抽离出形成公共组件，下面是组件具体代码（借助ElementUI中导航栏组件）：

<template>
  <div>
    <!--叶子级菜单-->
    <template v-if="item.children && item.children.length === 0">
      <el-menu-item :key="item.id" :index="item.path">
        {
  {item.nameZh}}
      </el-menu-item>
    </template>
    <!--父级菜单-->
    <el-submenu v-else :index="item.path" style="text-align: left">
      <span slot="title" style="font-size: 17px;">
        <i :class="item.iconCls"></i>
        {
  {item.nameZh}}
      </span>
      <template v-for="child in item.children">
        <navigation-item v-if="child.children && child.children.length>0" :key="child.id" :item="child"/>
        <el-menu-item v-else :key="child.id" :index="child.path"&g