vue 后台获取路由列表转换格式

我这儿后台传回来的路由格式，都是平级的，格式如下:

export const routers = [
  {
    id: 1,
    pageCode: "10001",
    pageName: "Permission",
    pagePath: "permission",
    pageLevel: 1,
    parentPage: 0,
    component: "layout",
    title: "权限管理",
    icon: 'lock',
    alwaysShow: true,
    isHidden: false,
    active: true,
    pageButtons: []
  },
  {
    id: 2,
    pageCode: "10001001",
    pageName: "PermissionIndex",
    pagePath: "permissionIndex",
    pageLevel: 2,
    parentPage: 10001,
    title: "权限设置",
    isHidden: false,
    active: true,
    pageButtons: [
      {
        id: 1,
        code: "1001",
        name: "新增",
        methodName: "add",
        pageId: 2,
        active: false
      },
      {
        id: 2,
        code: "1002",
        name: "删除",
        methodName: "del",
        pageId: 2,
        active: false
      }
    ]
  },
  {
    id: 3,
    pageCode: "10002",
    pageName: "reportModules",
    pagePath: "reportModules",
    pageLevel: 1,
    parentPage: 0,
    title: "报告模块",
    component: "layout",
    isHidden: false,
    alwaysShow: true,
    active: true,
    pageButtons: []
  },
  {
    id: 4,
    pageCode: "10002001",
    pageName: "reoprtList",
    pagePath: "reoprtList",
    pageLevel: 2,
    parentPage: 10002,
    title: "报告列表",
    isHidden: false,
    active: true,
    pageButtons: [
      {
        id: 1,
        code: "2001",
        name: "查询报告",
        methodName: "get",
        pageId: 2,
        active: false
      },
      {
        id: 2,
        code: "2002",
        name: "下载报告",
        methodName: "update",
        pageId: 2,
        active: false
      }
    ]
  }
]

整理：

import Layout from '@/layout/index.vue'
 export const  getRouters = (data, pageCode='pageCode', parentPage='parentPage') => {
   const routerList = []
   const btnList = []
   const map = {}
   if(!Array.isArray(data)){
     return routerList
    }
    data.forEach(item => {
      delete item.children
    });
    data.forEach((item) =>{
      map[item.pageCode] = item
    }) 
    data.forEach((item) => {
      const parent = map[item[parentPage]]
      if(parent){
        if(!parent.children){
          parent.children = []
        }
        btnList.push(...item.pageButtons)
        parent.children.push({
          name:item.pageName,
          path: item.pagePath,
          component:(resolve) => require([`@/views/${parent.pageName}/${item.pageName}.vue`],resolve),
          meta:{
            title:item.title,
            hidden:item.isHidden,
          }
        })
      } else{
        item.name = item.pageName
        item.path = '/' + item.pagePath
        item.component = Layout
        item. meta ={
          title:item.title,
          hidden:item.isHidden,
          icon:item.icon
        }
        btnList.push(...item.pageButtons)
        routerList.push(item)
      }
    })
    routerList.push({ path: '*', redirect: '/404', hidden: true })
    return {routerList,btnList}
}

开始用自己写的模拟数据没报错，后来用请求回来的数据去调用，报错了
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

发现是接口返回的pageButtons 是 null。 这里用扩展运算符报错了。加个判断
item.pageButtons && btnList.push(...item.pageButtons)