how to use addRoute inside router.beforeEach ?

[jdkcoder]

Here is my code using for adding route dynamically, but it only works when I use outside router.beforeEach.
What I want to do is when I received response from API await store.fetchTreeBySite(1); then I excute the action addRoute

import { createRouter, createWebHistory } from 'vue-router';
import CreateAuthor from '@/views/cms/author/Create.vue';
import { useModuleStore } from '@/stores/com/system';
import { computed, ref } from 'vue';

const routeToComponentMap = {
  'cms': CreateAuthor,
}

// Tạo router instance
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [],
});

router.beforeEach(async (to, from, next) => {
  const store = useModuleStore();
  try {
    await store.fetchTreeBySite(1); 
    const modules = computed(() => store.currentModuleTree)
    const routesData = modules.value;
    
    routesData.forEach(routeData => {
     if(routeData.route) {
       const componentImport = routeToComponentMap[String(routeData?.route)];
      console.log(componentImport)
      if (componentImport) {
        router.addRoute({
          path: `/${routeData.route}`,
          component: CreateAuthor, 
        });
      }
     }
    });

  } catch (error) {
    console.error('Error fetching data from API:', error);
  }

  next();
});
export default router;

[posva]

You need to navigate again after adding routes: https://router.vuejs.org/guide/advanced/dynamic-routing.html#Adding-Routes-inside-navigation-guards

BTW: you should remove the computed from the guard, just read the value directly. It might create a leak otherwise

[KevinDeAnDan]

I also encountered a similar problem, I wanted to call API from the store to get all component paths (component is static data).
How to configure the router to run behind the store (dynamic router).