vue中使用递归组件实现无限级菜单

在vue项目中，特别是后台管理系统，通常会有用户权限控制，每个用户的权限是不同的，所以展示的菜单不同，通常的做法是生成不同的路由表，然后我们通过这个路由表去生成菜单，如果菜单的层级结构固定，那可以采用普通的写法，那如果菜单层级不确定的话，就得采用递归组件来实现。下面超人鸭讲解自己写的一个demo，是模仿vue-element-admin这个模板的逻辑写的，加以简化。

菜单所使用的ui组件是element-ui的el-menu组件。
菜单往大了说其实就两种状态，一种是点击进行跳转的，通常是菜单的最后一级；另一种是菜单目录，点击之后下面还有子菜单，一般可以进行收缩。所以基本思路就是将某一个路由信息传递进组件，组件里面去判断这个路由信息，看是要生成最后一级的菜单还是菜单目录，如果是菜单目录，再去递归。
element-ui中的el-menu组件就有符合这两种状态的组件：

如果是菜单的最后一级，就用el-menu-item
如果是菜单目录下面还有子菜单的，就用el-submenu，该组件下面可以再嵌套el-submenu和el-menu-item

上面就是基本的思路，下面是实现

根据权限生成路由表这部分不再主题内，就省略掉，先看看路由信息：

export const routes = [
  {
    path: '/login',
    component: Main,
    hidden: true
  },
  {
    path: '/',
    component: Main,
    redirect: '/one',
    children: [
      {
        path: 'one',
        component: Test,
        meta: { title: '菜单一', icon: 'el-icon-setting' }
      }
    ]
  },
  {
    path: '/two',
    component: Main,
    meta: { title: '菜单二', icon: 'el-icon-setting' },
    children: [
      {
        path: 'index',
        component: Test,
        meta: { title: '菜单二-1' }
      }
    ]
  },
  {
    path: '/there',
    component: Main,
    meta: { title: '菜单三', icon: 'el-icon-setting' },
    children: [
      {
        path: 'one',
        component: Test,
        meta: { title: '菜单三-1' }
      },
      {
        path: 'two',
        component: Test,
        meta: { title: '菜单三-2' },
        children: [
          {
            path: 'one',
            component: Test,
            meta: { title: '菜单三-1' }
          },
          {
            path: 'two',
            component: Test,
            meta: { title: '菜单三-2' }
          }
        ]
      }
    ]
  },
  {
    path: '/four',
    component: Main,
    meta: { title: '菜单四', icon: 'el-icon-setting' },
    children: [
      {
        path: 'one',
        component: Test,
        meta: { title: '菜单四-1' }
      },
      {
        path: 'there',
        component: Test,
        meta: { title: '菜单四-3' },
        hidden: true
      }
    ]
  },
  {
    path: '/five',
    component: Main,
    alwaysShow: true,
    meta: { title: '菜单五', icon: 'el-icon-setting' },
    children: [
      {
        path: 'one',
        component: Test,
        meta: { title: '菜单五-1' }
      }
    ]
  }
]

其中的component属性都是测试用的写得不规范可以忽略，其中有几个属性这里说明一下：

hidden：代表该条路由不在菜单展示，一般为登录页，404页等
alwaysShow：代表该路由信息要作为菜单目录显示，就是可以收缩，下面还有子路由，通常当一个菜单下面只有一个子菜单的时候就不做分级展示，所以在组件里面是通过alwaysShow这个属性控制的。
先看看页面展示效果:

image.png

结合上面的路由信息，关注菜单四这项，菜单四的路由信息有两个子路由，但是其中一个hidden属性为true，不展示在菜单上，所以它只有一个子菜单，同时没有alwaysShow属性，就不作分级展示，直接显示一级菜单。而菜单五因为有alwaysShow为true，所以尽管只有一个子菜单，但还是进行分级展示。

超人鸭描述能力很差，希望到这你们能看懂我描述的功能。^ - ^

下面是具体的实现代码，我会结合注释讲解。

首先element-ui的菜单组件，里面的属性可以到element官网看看解释，无关这个主题。下面是菜单的入口组件:

<template>
  <div class="side-bar-index">
    <el-scrollbar style="height:100%">
      <el-menu
        :default-active="$route.path"
        background-color="#304156"
        text-color="#bfcbd9"
        :unique-opened="false"
        active-text-color="#409EFF"
        :collapse-transition="false"
        mode="vertical"
      >
        <!-- 下面是主要实现功能的组件 -->
        <sidebar-item
          v-for="route in isShowRoutes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        ></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem'
import { routes } from '@/router/index'
export default {
  components: {
    SidebarItem
  },
  computed: {
    // 过滤hidden的路由
    isShowRoutes () {
      return routes.filter((item) => {
        return !item.hidden
      })
    }
  }
}
</script>

这个组件就是用了element的菜单组件，并将路由过滤了一遍，主要实现在SidebarItem这个组件里面，这里使用v-for将每一个路由对象传递进去，上面也说到，菜单只有两个状态，对应的组件是element-ui的el-menu-item、el-submenu，而且el-submenu组件下面能在嵌套el-submenu和el-menu-item组件，所以在SidebarItem这个组件里面的基本逻辑就是:

<el-menu-item v-if="....."></el-menu-item>
<el-submenu v-else>
  <!-- 递归 -->
  <sidebar-item></<sidebar-item>
</el-submenu>

// 逻辑处理

然后在组件的create函数里面判断传递进来的路由对象是渲染成el-menu-item还是el-submenu，下面放上SidebarItem组件的完整代码:

<template>
  <!-- 限制：路由定义的meta必须要有title字段 -->
  <div>
    <!-- 该组件进来只会走一种情况，走了菜单逻辑就不再递归 -->
    <!-- 菜单 -->
    <template v-if="isShowOneMenu">
      <el-menu-item :index="resolvePath(data.path)">
        <i v-if="data.meta.icon" :class="data.meta.icon"></i>
        <span @click="handleClick(resolvePath(data.path))">{{data.meta.title}}</span>
      </el-menu-item>
    </template>
    <!-- 菜单目录（可收缩） -->
    <el-submenu v-else :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <i :class="item.meta.icon"></i>
        <span>{{item.meta.title}}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        :base-path="resolvePath(child.path)"
      />
    </el-submenu>
  </div>
</template>

<script>
import path from 'path'
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      data: {}, // 当前组件处理过后的菜单信息
      isShowOneMenu: false // 判断渲染el-menu-item还是el-submenu的标识
    }
  },
  methods: {
    /**
     * 区分路由是否是最后一层或者只有一个子路由
     * 当路由只有一个子路由时有两种情况，一种是不展示收缩了，直接将唯一的子路由作为菜单；另一种是展示收缩，展开下面只有一个子菜单的。由在路由信息中的属性alwaysShow定义。
     */
    handleRoute () {
      // 当递归到最后一层，路由已经没有children了
      if (!this.item.children) {
        this.isShowOneMenu = true
        this.data = { ...this.item, path: '' }
        return
      }

      // 过滤掉children中hidden的
      const showingChildren = this.item.children.filter(item => {
        return !item.hidden
      })
      // 此时要给item的children赋值，赋值为过滤完hidden的
      this.item.children = showingChildren

      // 当只有一个子路由并且不展示收缩时做菜单处理，并且这个子路由没有children属性时
      if (showingChildren.length === 1 && !showingChildren[0].children && !this.item.alwaysShow) {
        this.isShowOneMenu = true
        this.data = showingChildren[0]
       // 如果该路由有meta信息与子路由的meta信息做结合，已子路由的meta信息优先
        if (this.item.meta) {
          this.data.meta.title = this.data.meta.title ? this.data.meta.title : this.item.meta.title
          this.data.meta.icon = this.data.meta.icon ? this.data.meta.icon : this.item.meta.icon
        }
      }
    },
    resolvePath (routePath) {
      return path.resolve(this.basePath, routePath)
    },
    handleClick (path) {
      this.$router.push(path)
    }
  },
  created () {
    this.handleRoute()
  }
}
</script>

其中大部分逻辑处理我都写在代码注释里，最主要的还是handleRoute这个方法里面的逻辑，通过处理this.isShowOneMenu这个变量来控制SidebarItem组件是渲染哪一种组件，而且只能是两种组件中的一种，如果是做菜单目录处理，就渲染el-submenu，里面再去嵌套SidebarItem组件，不断的重复上面的逻辑。其中有个需要注意的点，就是当递归到最后一层的时候，是直接将路由信息赋值给当前组件的data，需要把path清空，因为传递进来的basePath已经是最后一层路由的path了，这样做拼接的时候才不会出错。

到这里使用递归组件实现无限级菜单就实现了，当然这是按我的逻辑来实现，其中有些不完美的地方，比如路由的meta中我要求必须要有title字段，当路由设置了alwaysShow属性，那当层的路由对象也必须要有meta对象。当然这些是可以根据你们具体的设置来修改。

如果之前没有接触过类似逻辑的组件，可能看着会比较乱，可以把超人鸭的代码复制进你们的demo尝试一下，随便修修改改一下就能理清的。

作者微信: Promise_fulfilled