0๐
โ
I did it like this:
const createChildRoutes = (children) => {
return children?.map((child) => {
const childRoute = {
path: child.path,
name: child.name,
meta: child.meta,
alias: child.alias,
redirect: child.redirect,
};
if (child.name) {
return {
...childRoute,
component: () =>
import(
/* webpackPrefetch: true */
/* webpackChunkName: "[request]" */ `../views/${child.name
.replace(" ", "-")
.toLowerCase()}/${child.name
.replace(" ", "-")
.toLowerCase()}.component.vue`
),
};
} else {
return childRoute;
}
});
};
const routes = routeOptions.map((route) => {
const mainRoute = {
path: route.path,
name: route.name,
meta: route.meta,
alias: route.alias,
redirect: route.redirect,
};
if (route.name) {
return {
children: createChildRoutes(route?.children),
...mainRoute,
component: () =>
import(
/* webpackPrefetch: true */
/* webpackChunkName: "[request]" */ `../views/${route.name
.replace(" ", "-")
.toLowerCase()}/${route.name
.replace(" ", "-")
.toLowerCase()}.component.vue`
),
};
} else {
return {
children: createChildRoutes(route?.children),
...mainRoute,
};
}
});
Source:stackexchange.com