Vue3权限管理对路由进行排序和格式化vue3项目做动态路由权限管理的时候，往往需要自己写递归来进行对数据的排序和格式化

vue3项目做动态路由权限管理的时候，往往需要自己写递归来进行对数据的排序和格式化，本文推荐一个对树操作的js函数库----xe-utils，来简化递归，从而提升效率

代码

菜单数据

// 菜单数据
[
  {
    id: '04',
    parentId: '',
    path: '/form',
    component: 'Layout',
    redirect: '/form/base',
    type: 1,
    title: '表单管理',
    svgIcon: 'menu-form',
    icon: '',
    keepAlive: false,
    hidden: false,
    sort: 5,
    activeMenu: '',
    breadcrumb: true,
    children: [
      {
        id: '0401',
        parentId: '04',
        path: '/form/base',
        component: 'form/base/index',
        redirect: '',
        type: 2,
        title: '基础表单',
        svgIcon: '',
        icon: 'icon-menu',
        keepAlive: false,
        hidden: false,
        sort: 0,
        activeMenu: '',
        breadcrumb: true,
        status: 1,
        roles: ['role_admin', 'role_user'],
        permission: '',
        showInTabs: true,
        alwaysShow: false,
        affix: false
      },
      {
        id: '0402',
        parentId: '04',
        path: '/form/step',
        component: 'form/step/index',
        redirect: '',
        type: 2,
        title: '分步表单',
        svgIcon: '',
        icon: 'icon-menu',
        keepAlive: false,
        hidden: false,
        sort: 0,
        activeMenu: '',
        breadcrumb: true,
        status: 1,
        roles: ['role_admin', 'role_user'],
        permission: '',
        showInTabs: true,
        alwaysShow: false,
        affix: false
      },
      {
        id: '0403',
        parentId: '04',
        path: '/form/custom',
        component: 'form/custom/index',
        redirect: '',
        type: 2,
        title: '配置表单',
        svgIcon: '',
        icon: 'icon-menu',
        keepAlive: false,
        hidden: false,
        sort: 0,
        activeMenu: '',
        breadcrumb: true,
        status: 1,
        roles: ['role_admin', 'role_user'],
        permission: '',
        showInTabs: true,
        alwaysShow: false,
        affix: false
      }
    ],
    status: 1,
    roles: ['role_admin', 'role_user'],
    permission: '',
    showInTabs: true,
    alwaysShow: false,
    affix: false
  },
  {
    id: '05',
    parentId: '',
    path: '/table',
    component: 'Layout',
    redirect: '/table/base',
    type: 1,
    title: '表格管理',
    svgIcon: 'menu-table',
    icon: '',
    keepAlive: false,
    hidden: false,
    sort: 6,
    activeMenu: '',
    breadcrumb: true,
    children: [
      {
        id: '0501',
        parentId: '05',
        path: '/table/base',
        component: 'table/base/index',
        redirect: '',
        type: 2,
        title: '基础表格',
        svgIcon: '',
        icon: 'icon-menu',
        keepAlive: false,
        hidden: false,
        sort: 0,
        activeMenu: '',
        breadcrumb: true,
        status: 1,
        roles: ['role_admin', 'role_user'],
        permission: '',
        showInTabs: true,
        alwaysShow: false,
        affix: false
      },
      {
        id: '0502',
        parentId: '05',
        path: '/table/custom',
        component: 'table/custom/index',
        redirect: '',
        type: 2,
        title: '自定义表格',
        svgIcon: '',
        icon: 'icon-menu',
        keepAlive: false,
        hidden: false,
        sort: 0,
        activeMenu: '',
        breadcrumb: true,
        status: 1,
        roles: ['role_admin', 'role_user'],
        permission: '',
        showInTabs: true,
        alwaysShow: false,
        affix: false
      }
    ],
    status: 1,
    roles: ['role_admin', 'role_user'],
    permission: '',
    showInTabs: true,
    alwaysShow: false,
    affix: false
  }
]

以下是排序和格式化之后的数据（最终需要的数据格式）

// 菜单数据经过排序、格式化后得到的数据
[
  {
    path: '/form',
    name: 'Form',
    component: () => import('@/layout/index.vue'),
    redirect: '/form/base',
    meta: {
      hidden: false,
      keepAlive: false,
      title: '表单管理',
      svgIcon: 'menu-form',
      icon: '',
      affix: false,
      breadcrumb: true,
      showInTabs: true,
      activeMenu: '',
      alwaysShow: false
    },
    children: [
      {
        path: '/form/base',
        name: 'FormBase',
        component: () => import('@/views/form/base/index.vue'),
        redirect: '',
        meta: {
          hidden: false,
          keepAlive: false,
          title: '基础表单',
          svgIcon: '',
          icon: 'icon-menu',
          affix: false,
          breadcrumb: true,
          showInTabs: true,
          activeMenu: '',
          alwaysShow: false
        }
      },
      {
        path: '/form/step',
        name: 'FormStep',
        component: () => import('@/views/form/step/index.vue'),
        redirect: '',
        meta: {
          hidden: false,
          keepAlive: false,
          title: '分步表单',
          svgIcon: '',
          icon: 'icon-menu',
          affix: false,
          breadcrumb: true,
          showInTabs: true,
          activeMenu: '',
          alwaysShow: false
        }
      },
      {
        path: '/form/custom',
        name: 'FormCustom',
        component: () => import('@/views/form/custom/index.vue'),
        redirect: '',
        meta: {
          hidden: false,
          keepAlive: false,
          title: '配置表单',
          svgIcon: '',
          icon: 'icon-menu',
          affix: false,
          breadcrumb: true,
          showInTabs: true,
          activeMenu: '',
          alwaysShow: false
        }
      }
    ]
  },
  {
    path: '/table',
    name: 'Table',
    component: () => import('@/layout/index.vue'),
    redirect: '/table/base',
    meta: {
      hidden: false,
      keepAlive: false,
      title: '表格管理',
      svgIcon: 'menu-table',
      icon: '',
      affix: false,
      breadcrumb: true,
      showInTabs: true,
      activeMenu: '',
      alwaysShow: false
    },
    children: [
      {
        path: '/table/base',
        name: 'TableBase',
        component: () => import('@/views/table/base/index.vue'),
        redirect: '',
        meta: {
          hidden: false,
          keepAlive: false,
          title: '基础表格',
          svgIcon: '',
          icon: 'icon-menu',
          affix: false,
          breadcrumb: true,
          showInTabs: true,
          activeMenu: '',
          alwaysShow: false
        }
      },
      {
        path: '/table/custom',
        name: 'TableCustom',
        component: () => import('@/views/table/custom/index.vue'),
        redirect: '',
        meta: {
          hidden: false,
          keepAlive: false,
          title: '自定义表格',
          svgIcon: '',
          icon: 'icon-menu',
          affix: false,
          breadcrumb: true,
          showInTabs: true,
          activeMenu: '',
          alwaysShow: false
        }
      }
    ]
  }
]