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官网看看解释，无关这个主题。下面是菜单的入口组件:

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



  
  


// 逻辑处理

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

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

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

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

作者微信: Promise_fulfilled

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

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

你可能感兴趣的:(vue中使用递归组件实现无限级菜单)