递归生成菜单

一：递归的概念

递归，在数学与计算机科学中，是指在方法的定义中使用方法自身。也就是说，递归算法是一种直接或者间接调用自身方法的算法。简言之：在定义自身的同时又出现自身的直接或间接调用。

注意：递归必须要有一个退出的条件！

递归算法解决问题的特点： 

• 递归就是方法里调用自身
• 在使用递归策略时，必须有一个明确的递归结束条件，称为递归出口。
• 递归算法解题通常显得很简洁，但递归算法解题的运行效率较低
• 在递归调用的过程中，系统为每一层的返回点、局部变量等开辟了栈来存储。递归次数过多容易造成栈溢出等，所以一般不提倡使用递归算法设计程序。

在做递归算法的时候，一定要把握住出口，也就是做递归算法必须要有一个明确的递归结束条件。这一点是非常重要的。其实这个出口是非常好理解的，就是一个条件，当满足了这个条件的时候我们就不再递归了。

 二：实际项目运用

在项目中可以使用到递归来完成一些需要多次调用自身的设计

1.在设计菜单时可以使用到递归来解决

如以下情况：

设计一个侧边菜单，需要分为一级，二级，三级等菜单，此时多级菜单需要不断的调用自身的子菜单来分下一级菜单。

代码如下：

    <template v-for="(item, index) in menuList" :key="item.path">
      <!-- 没有子路由 -->
      <template v-if="!item.children" >
        <el-menu-item :index="item.path" v-if="!item.meta.hidden">
          <template #title>
            <span>标&nbsp;</span>
            <span>{
   
   { item.meta.title }}</span>
          </template>
        </el-menu-item>
      </template>
      <!-- 有子路由，但是只有一个子路由 -->
      <template v-if="item.children && item.children.length == 1">
        <el-menu-item
        v-if="item.children[0].meta.hidden"
        :index="item.children[0].path"
      >
        <template #title>
          <span>{
   
   { item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
      </template>
      <!-- 有子路由且个数大于一个 -->
      <el-sub-menu
        :index="item.path"
        v-if="item.children && item.children.length > 1"
      >
        <template #title>
          <span>{
   
   { item.meta.title }}</span>
        </template>
      </el-sub-menu>
    </template>

 在设计多级菜单的时候，我们可以用递归的方法来解决。

需要将整个template设计为一个<Menu>组件来进行

代码如下：

 //设计多级菜单
<el-sub-menu
        :index="item.path"
        v-if="item.children && item.children.length > 1"
      >
        <template #title>
          <span>{
   
   { item.meta.title }}</span>
        </template>
        <Menu :menuList="item.children"></Menu>
      </el-sub-menu>

其中<Menu>组件就是在不断调用自身来解决多级菜单的问题