How can I ensure dynamic routes are loaded before Vue navigation?

Below is one common solution: fetch and add your dynamic routes before mounting your Vue app. That way, when the router instance is created and the initial navigation happens, all routes are in place.

Why Your Current Approach Fails

• When you add routes in a global navigation guard (like in router.beforeEach), the navigation for an already bookmarked page (e.g. /xy) might start before your dynamic routes are added.
• If routes are added after the initial navigation has already determined the matched routes, then the added routes won’t be considered—resulting in a blank page (or fallback behavior).

Recommended Approach: Delay App Mount Until Routes Are Loaded

Instead of adding routes asynchronously in a navigation guard or after router creation, perform the asynchronous fetch first and then add routes and mount your app. For example:

TYPESCRIPTCopied
// main.ts or similar entry file

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

async function initializeApp() {
  try {
    const response = await fetch('http://localhost:8000/api/test/all');
    const data = await response.json();

    if (data) {
      for (let route of data) {
        router.addRoute({
          path: '/' + route.name,
          name: route.name,
          component: () => import('./views/TestView.vue')
        });
      }
    }
  } catch (error) {
    console.error('Failed to fetch dynamic routes:', error);
  }

  // Now that routes are added, mount the app
  createApp(App)
    .use(router)
    .mount('#app');
}

initializeApp();

How This Works

• The initializeApp function waits for the fetch to complete.
• Once the dynamic routes are added using router.addRoute, the Vue app is created and mounted.
• This ensures that when the router begins handling navigation (even on page reload), all necessary routes have already been registered.

Alternative Considerations

• Fallback Route: Even when delaying the app mount, you might consider having a fallback route (like a 404 page) to handle unexpected paths.
• Loading State: If dynamic route data might take time to load, you could show a loading screen until everything is ready.
• Error Handling: Proper error handling for the fetch ensures that your app can either display an error or fallback gracefully if the route data isn’t available.

This approach avoids the race condition seen when adding routes too late after the initial navigation has already been resolved.