vue.js - How to fetch data in router index.ts? - Stack Overflow

So I have the problem that the routes are getting loaded too late, and they exist, but when I reload the page, they won't show, so my guess is that they are getting loaded too late. I have the following code in the index.ts of the router:

fetch('http://localhost:8000/api/test/all').then((response) => response.json())
.then((data) => { 
  if (data) {
    for (let route of data)  {
      router.addRoute({path: '/' + route.name, name: route.name, component: () => import('../views/TestView.vue')})
    }
  };
});

Is there some sort of lifecycle hook, or can I make it somehow to wait for the result before navigating to the page? I tried with beforeRouteEnter, but it did not work.

following i tried in App.vue

router.beforeEach((to, from, next) => {
  fetch('http://localhost:8000/api/test/all').then((response) => response.json())
  .then((data) => { 
    if (data) {
      for (let route of data)  {
        router.addRoute({path: '/' + route.name, name: route.name, component: () => import('./views/TestView.vue')})
      }
      next()
    };
  });
})

but when i refresh on /xy then i get a blank site cause it didnt find /xy

So I have the problem that the routes are getting loaded too late, and they exist, but when I reload the page, they won't show, so my guess is that they are getting loaded too late. I have the following code in the index.ts of the router:

fetch('http://localhost:8000/api/test/all').then((response) => response.json())
.then((data) => { 
  if (data) {
    for (let route of data)  {
      router.addRoute({path: '/' + route.name, name: route.name, component: () => import('../views/TestView.vue')})
    }
  };
});

Is there some sort of lifecycle hook, or can I make it somehow to wait for the result before navigating to the page? I tried with beforeRouteEnter, but it did not work.

following i tried in App.vue

router.beforeEach((to, from, next) => {
  fetch('http://localhost:8000/api/test/all').then((response) => response.json())
  .then((data) => { 
    if (data) {
      for (let route of data)  {
        router.addRoute({path: '/' + route.name, name: route.name, component: () => import('./views/TestView.vue')})
      }
      next()
    };
  });
})

but when i refresh on /xy then i get a blank site cause it didnt find /xy

• vue.js

Share Follow edited Jan 30 at 10:42 Robin asked Jan 30 at 9:59 RobinRobin 1777 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The first navigation happens when router plugin is enabled, this happens before the application is mounted. The most straightforward way would be:

await addDynamicRoutes();
app.use(router)
app.mount(...);

The alternative is to additionally handle this in router hook, this is covered in the documentation:

let dynamicRoutesAdded;
router.beforeEach(async (to, from) => {
  if (dynamicRoutesAdded)
    return;

  await addDynamicRoutes();
  dynamicRoutesAdded = true;
  return to.fullPath;
});
  

next callback is deprecated because router hooks support promises.