在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
网友评论