Question

我需要检查路由列表并按路径将其分组，例如/mens成为包含/mens的所有其他路由的“父路由”，依此类推...所需结果想要这个，

const newRoutes = {
  "/kids": [{
    "path": "/kids",
    "name": "kids-clothing-section",
    "children": [{
        "path": "/kids/shoes",
        "name": "kids-clothing-shoes",
      },
      {
        "path": "/kids/shirts",
        "name": "kids-clothing-shirts",
      }
    ]
  }]
}

我知道如何使用香草javascript（减少）和lodash（_.groupBy()）进行分组。但是其余部分对我来说太复杂了，尤其是在路径/path父级上匹配的部分。非常感谢您提供任何帮助！

编辑因此，并非所有路线都是通往“家”的孩子，我认为应该进行path.lenght > 3长度检查。

const routes = [{
    path: '/',
    name: 'home',
  },
  {
    path: '/about',
    name: 'about',
  },
  {
    path: '/mens',
    name: 'mens-clothing-section',
  },
  {
    path: '/mens/shoes',
    name: 'mens-clothing-shoes',
  },
  {
    path: '/mens/shoes/:id',
    name: 'mens-clothing-shoes-details'
  },
  {
    path: '/kids',
    name: 'kids-clothing-section',
  },
  {
    path: '/kids/shoes',
    name: 'kids-clothing-shoes',
  },
  {
    path: '/kids/jeans',
    name: 'kids-clothing-jeans',
  },
  {
    path: '/kids/shirts',
    name: 'kids-clothing-shirts',
  },
  {
    path: '/kids/shoes/:id',
    name: 'kids-clothing-shoes-details'
  }
]



const groupedRoutes = routes.reduce(function(obj, route) {
  // get the path of the route
  const path = route.path

  const splitted = path.split('/')[1]

  if (!obj.hasOwnProperty(splitted)) {
    obj[splitted] = []
  }

  obj[splitted].push(route)

  return obj
}, {})

console.log(groupedRoutes)

Answer 1

也许可以通过使用数组作为结果集来为您工作。

const
    routes = [{ path: '/', name: 'home' }, { path: '/about', name: 'about' }, { path: '/mens', name: 'mens-clothing-section' }, { path: '/mens/shoes', name: 'mens-clothing-shoes' }, { path: '/mens/shoes/:id', name: 'mens-clothing-shoes-details' }, { path: '/kids', name: 'kids-clothing-section' }, { path: '/kids/shoes', name: 'kids-clothing-shoes' }, { path: '/kids/jeans', name: 'kids-clothing-jeans' }, { path: '/kids/shirts', name: 'kids-clothing-shirts' }, { path: '/kids/shoes/:id', name: 'kids-clothing-shoes-details' }],
    groupedRoutes = routes.reduce(function (r, { path, name }) {
        path
            .split(/(?=\/)/)
            .reduce((a, _, i, p) => {
                var path = p.slice(0, i + 1).join(''),
                    item = a.find(q => q.path === path);

                if (!item) a.push(item = { path, name, children: [] });
                return item.children;
            }, r);            
        return r;
    }, []);
	
   console.log(groupedRoutes);

.as-console-wrapper { max-height: 100% !important; top: 0; }

没有多余的孩子。

const
    routes = [{ path: '/', name: 'home' }, { path: '/about', name: 'about' }, { path: '/mens', name: 'mens-clothing-section' }, { path: '/mens/shoes', name: 'mens-clothing-shoes' }, { path: '/mens/shoes/:id', name: 'mens-clothing-shoes-details' }, { path: '/kids', name: 'kids-clothing-section' }, { path: '/kids/shoes', name: 'kids-clothing-shoes' }, { path: '/kids/jeans', name: 'kids-clothing-jeans' }, { path: '/kids/shirts', name: 'kids-clothing-shirts' }, { path: '/kids/shoes/:id', name: 'kids-clothing-shoes-details' }],
    groupedRoutes = routes.reduce(function (r, { path, name }) {
        path
            .split(/(?=\/)/)
            .reduce((o, _, i, p) => {
                var path = p.slice(0, i + 1).join(''),
                    item = (o.children = o.children || []).find(q => q.path === path);

                if (!item) o.children.push(item = { path, name });
                return item;
            }, r);            
        return r;
    }, { children: [] }).children;
	
   console.log(groupedRoutes);

.as-console-wrapper { max-height: 100% !important; top: 0; }

通过按值，包含（），自定义结构

1 个答案: