[Vuejs]-Vue route mapping with redirects

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,
    };
  }
});

Leave a comment