怎么在Vue中利用递归实现树形菜单？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
数据结构：vue-router的数据结构
计算
安全
数据库
网络和加速
企业服务
const routes = [
{
name: 'home',
path: '/home',
meta: { text: '首页' }
},
{
name: 'inner',
path: '/inner',
meta: { text: '内部平台' },
children: [
{
name: 'oa',
path: 'oa',
meta: { text: 'OA' }
},
{
name: 'jira',
path: 'jira',
meta: { text: 'Jira' }
},
{
name: 'wiki',
path: 'wiki',
meta: { text: 'Wiki' }
},
{
name: 'caiwu',
path: 'caiwu',
meta: { text: '财务' },
children: [
{
name: 'chailv',
path: 'chailv',
meta: { text: '差旅' }
},
{
name: 'richang',
path: 'richang',
meta: { text: '日常' },
children: [
{
name: 'taxi',
path: 'taxi',
meta: { text: '交通' }
},
{
name: 'tel',
path: 'tel',
meta: { text: '通信' }
}
]
}
]
}
]
},
{
name: 'sec',
path: '/sec',
meta: { text: '审核' },
children: [
{
name: 'acl',
path: '/acl',
meta: { text: 'ACL' }
}
]
}
]组件实现：
先看看render函数，其中包含一个递归函数elements：
render (r) {
return r(
'el-menu',
{
props: {
backgroundColor: "#545c64",
textColor: "#fff",
activeTextColor: "#ffd04b"
},
on: {
select: this.onSelect
}
},
this.elements(this.routes, r)
)
}elements函数：
elements (routes, r) {
return routes
.map(route => {
if (!route.paths) route.paths = []
if (route.children && route.children.length) {
return r(
'el-submenu',
{
props: {
index: route.name
}
},
[
r(
'span',
{
slot: 'title'
},
[
route.meta.text
]
),
this.elements(route.children, r)
]
)
} else if (route.path) {
return r(
'el-menu-item',
{
props: {
index: route.name
}
},
[
route.meta.text
]
)
} else {
return null
}
})
.filter(item => item)
}Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
看完上述内容，你们掌握怎么在Vue中利用递归实现树形菜单的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
