详解Element-ui NavMenu子菜单使用递归生成时使用报错

当使用Element-ui的NavMenu组件递归生成子菜单时，可能会出现一些报错，本攻略将详细讲解如何解决这些报错。

问题1：Cannot read property 'children' of undefined

在递归生成NavMenu子菜单时，如果当前菜单项没有children属性，即此菜单项没有子菜单，那么在尝试访问这个菜单项的children属性时就会出现“Cannot read property 'children' of undefined”报错。

解决方案：在访问children属性前，首先应该检查该属性是否存在或者是否为undefined，如果是则直接返回空数组即可。

以下是示例代码：

<template>
  <el-menu>
    <template v-for="item in menuData">
      <el-submenu v-if="item.children && item.children.length > 0">
        <template slot="title">{{item.name}}</template>
        <el-menu-item v-for="subItem in item.children" :index="subItem.key">
          {{subItem.name}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.key">{{item.name}}</el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          name: '菜单1',
          key: '1'
        },
        {
          name: '菜单2',
          key: '2',
          children: []  // 空数组，表示该菜单项没有子菜单
        }
      ]
    }
  }
}
</script>

问题2：Navigating to non-existent index

在递归生成NavMenu子菜单时，如果当前菜单项的children属性存在，但是其数组里面没有任何菜单项时，当点击该菜单项时就会出现“Navigating to non-existent index”报错。

解决方案：当children属性存在但是它的长度为0时，应该在当前菜单项的el-submenu标签中添加disabled属性来禁用这个菜单项。这样就不会出现点击菜单项时跳转到不存在的index的情况。

以下是示例代码：

<template>
  <el-menu>
    <template v-for="item in menuData">
      <el-submenu v-if="item.children && item.children.length > 0" :disabled="item.children.length === 0">
        <template slot="title">{{item.name}}</template>
        <el-menu-item v-for="subItem in item.children" :index="subItem.key">
          {{subItem.name}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.key">{{item.name}}</el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          name: '菜单1',
          key: '1'
        },
        {
          name: '菜单2',
          key: '2',
          children: []  // 空数组，表示该菜单项没有子菜单
        },
        {
          name: '菜单3',
          key: '3',
          children: [  // 含有子菜单的菜单项
            {
              name: '子菜单1',
              key: '3-1'
            },
            {
              name: '子菜单2',
              key: '3-2'
            }
          ]
        }
      ]
    }
  }
}
</script>

以上就是解决Element-ui NavMenu子菜单使用递归生成时出现报错的完整攻略，注意事项：（1）递归生成时需要对菜单项的children属性进行判断（2）当子菜单为空时在el-submenu标签中添加disabled属性以避免报错。