Vue3 Vuerouter4 addRoute issue

[focussing]

Hello!

My app uses routes from a database. In the main.js file I need an await getRoutes call to this database to retrieve all routes. That works perfectly in development.

When building for production an error message about top level await arrives, which is documented; I don't build for esnext.
So I only use only / and a 'fetch-all' error route in main.js and the rest in my navbar in which the await getRoutes is done.
This works when I click in the navbar, however when I type the path in the browser address bar (like /products) only it does not show the correct page but the error page. Only when I add /products as static route in main.js and type it in the address bar it works.
My conclusion is that all dynamically added routes cannot be typed in the address bar.

How can this be fixed?

I have installed all latest packages:

    "dependencies": {
        "@iconify/vue": "^4.1.1",
        "@mayasabha/ckeditor4-vue3": "^1.0.5",
        "@vueuse/core": "^10.5.0",
        "axios": "^1.6.0",
        "basic-ftp": "^5.0.3",
        "dropzone-vue": "^0.1.11",
        "lodash": "^4.17.21",
        "vue": "^3.3.7",
        "vue-router": "^4.2.5",
        "vue-tippy": "^6.3.1"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.4.0",
        "autoprefixer": "^10.4.16",
        "postcss": "^8.4.31",
        "tailwind-bootstrap-grid": "^5.0.1",
        "tailwindcss": "^3.3.5",
        "vite": "^4.5.0"
    }

[Youngpro95]

are you solve? if you don't solve try this

// Get the current path from the window location
const currentPath = window.location.pathname;

// Find the route in the router that matches the current path
const currentRoute = router.getRoutes().find((item) => item.path === currentPath);

// If there is no matching route, redirect to the home path
if (!currentRoute) {
  router.replace("/");
} else {
  // If there is a matching route, redirect to the current path
  router.replace(currentPath);
}