怎么在Vue中利用递归实现树形菜单

怎么在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的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

看完上述内容，你们掌握怎么在Vue中利用递归实现树形菜单的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！