Dynamic router VueJS

Question

I'm trying to create routes dynamically but unfortunately I'm not succeeding and it's not possible with Vuejs 3

import { createRouter, createWebHistory } from "vue-router";
import TopMenu from "../layouts/top-menu/Main.vue";
import hosts from '@/utils/hosts';
import Login from "../views/admin/login/Main.vue";
import Home from "../views/admin/home/Main.vue";
import Sair from "../views/admin/sair/Main.vue";

import { listaPaginas } from "@/composable/arthysis/paginas";

let routes = [];
var lstRoutes = [];

async function loadPage() {
  var { statuscode, message, data } = await searchPage();

    lstRoutes.push({
        path: `${hosts.app}` + "/home",
        name: "admManHome",
        component: Home,    
      });

    for (var i = 0; i < data.length; i++) {
      lstRoutes.push({
        path: `${hosts.app}/${data[i].path}`,
        name: data[i].name_page,
        component: () => import('../views/'+ data[i].path +'/'+ data[i].name_page +'.vue')
      });
  
    }

}

await loadPage();

routes = [
  {
    path: `${hosts.app}/`,
    name: "admManLogin",
    component: Login,

  },
  { 
    component: TopMenu,
    children: lstRoutes    
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { left: 0, top: 0 };
  },
});

export default router;

it is giving this error

vue-router.mjs:1486 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at createRouterMatcher (vue-router.mjs:1486:12) at createRouter (vue-router.mjs:2942:21) at index.js?t=1675540466219:137:16

I tried to create a function to import the component but it also gives the same error

Answer 1

router

....
async function searchRoutes() {
var { statuscode, message, data } = await searchPage();
let lstRoutes = [];
    for (var i = 0; i < data.length; i++) {
      let dsPath = `${hosts.app}/${data[i].path}`
      if (data[i].parameter != '' && data[i].parameter != null) {
        dsPath += "/:"+data[i].parameter+"?";
      }

      lstRoutes.push({
        path: dsPath,
        name: data[i].name_page ,
        component: () => import('../views/'+ data[i].path +'/'+ data[i].name_page  +'.vue')
      });
  
    }
  return lstRoutes;
}

async function createRouterInstance() {
  let lstRoute = [];
    lstRoute.push({
        path: `${hosts.app}` + "/home",
        name: "admManHome",
        component: Home,    
      });

  let respRotas = await searchRoutes();

  let routes = [
    {
      path: `${hosts.app}/`,
      name: "admManLogin",
      component: Login,
    },
    { 
      component: TopMenu,
      children: lstRoute    
    }
  ];

  const router1 = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
      return savedPosition || { left: 0, top: 0 };
    },
  });

  return router1;
}

const router = await createRouterInstance();

vue-router.mjs:798 Uncaught (in promise) Error: No match for {"name":"listUsers","params":{}} at createRouterError (vue-router.mjs:798:23) at Object.resolve (vue-router.mjs:1414:23) at Object.resolve (vue-router.mjs:3045:38) at Main.vue:44:94 at renderList (runtime-core.esm-bundler.js:2894:22) at Main.vue:54:22 at renderList (runtime-core.esm-bundler.js:2894:22) at Main.vue:58:18 at renderList (runtime-core.esm-bundler.js:2894:22) at Proxy._sfc_render (Main.vue:61:14)