Vue递归实现树形菜单方法实例

const routes = [
 {
 name: \'home\',
 path: \'/home\',
  : { text: \'首页\' }
 },
 {
 name: \'inner\',
 path: \'/inner\',
  : { text: \'内部平台\' },
 children: [
  {
  name: \'oa\',
  path: \'oa\',
   : { text: \'OA\' }
  },
  {
  name: \'jira\',
  path: \'jira\',
   : { text: \'Jira\' }
  },
  {
  name: \'wiki\',
  path: \'wiki\',
   : { text: \'Wiki\' }
  },
  {
  name: \'caiwu\',
  path: \'caiwu\',
   : { text: \'财务\' },
  children: [
   {
   name: \'chailv\',
   path: \'chailv\',
    : { text: \'差旅\' }
   },
   {
   name: \'richang\',
   path: \'richang\',
    : { text: \'日常\' },
   children: [
    {
    name: \'taxi\',
    path: \'taxi\',
     : { text: \'交通\' }
    },
    {
    name: \'tel\',
    path: \'tel\',
     : { text: \'通信\' }
    }
   ]
   }
  ]
  }
 ]
 },
 {
 name: \'sec\',
 path: \'/sec\',
  : { text: \'审核\' },
 children: [
  {
  name: \'acl\',
  path: \'/acl\',
   : { text: \'ACL\' }
  }
 ]
 }
]

render (r) {
 return r(
  \'el-menu\',
  {
  props: {
   backgroundColor: \"#545c64\",
   textColor: \"#fff\",
   activeTextColor: \"#ffd04b\"
  },
  on: {
   select: this. 
  }
  },
  this.elements(this.routes, r)
 )
 }

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: \' \'
     },
     [
     route. .text
     ]
    ),
    this.elements(route.children, r)
    ]
   )
   } else if (route.path) {
   return r(
    \'el-menu-item\',
    {
    props: {
     index: route.name
    }
    },
    [
    route. .text
    ]
   )
   } else {
   return null
   }
  })
  .filter(item => item)
 }