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"
    }

[LinusBorg]

My conclusion is that all dynamically added routes cannot be typed in the address bar.

Correct. If you load such a route from the address bar, the route config hasn't been loaded upfront, so the router doesn't recognize the route you typed in the address bar. This is logical and unavoidable.

How can this be fixed?

Load all routes upfront, like you wanted to from the beginning. If you can't use top-level await, use a bootstrap function or a normal promise instead.

[focussing]

Don't get me wrong I totally trust your statement. What I just don't understand is that the console log shows that the router has all routes present, and the navbar click would not work if the router would be loaded too late.
Also because I use an await getRoutes in the navbar it is on time.

PS1: As a parallel question to this remaining behaviour; in your first response you proposed to "use 1) a bootstrap function or 2) a normal promise instead". I understand that those 2 would help to get all routes from the database before the router initilization.

Could you give me an example of both proposed actions so I can test that? The current router behaviour is not useable for me, and like to get it solved one way or another.

PS2: I got around the Suspense suggestion to handle a top level await by using onBeforeMount so that is at least a positive result :)

Best regards Thorsten!

[focussing]

And what would be the right to exist of the Vue-router's addRoute function if the behaviour of the router differs between clicked or typed route changes?

[LinusBorg]

Don't get me wrong I totally trust your statement. What I just don't understand is that the console log shows that the router has all routes present, and the navbar click would not work if the router would be loaded too late.
Also because I use an await getRoutes in the navbar it is on time.

You only display the navbar after the routes have loaded. That's what you used await for in the Navbar and why you wrapped it in a Suspense component. So of course the Navbar links work - you only see them after all data has been loaded.

But that only applies to the Navbar, not the rest of the app!

The rest of the app renders right away, and is finished long before your server has even responded to the request for the additional routes. Which means the router has already tried to find a match for a route that has not yet been added. Which means it redirects to the error page instead.

Then, after that, the data arrives, the additional routes get added, but by then, you already are on the error page.

I hope that makes it clear now?

Could you give me an example of both proposed actions so I can test that? The current router behaviour is not useable for me, and like to get it solved one way or another.

// main.js

const app = createApp(App)
const router = createRouter(/* ... */)
bootstrap()

async function bootstrap () {
  const additionalRoutes = await getRoutes()
  additionalRoutes.map((route) => router.addRoute(route)
  app.use(router)
  app.mount('#app')
}

// main.js

const app = createApp(App)
const router = createRouter(/* ... */)

getRoutes().then((additionalRoutes) => {
  additionalRoutes.map((route) => router.addRoute(route)
  app.use(router)
  app.mount('#app')
})

[focussing]

Thanks a lot for your help and patience @LinusBorg.
I have used you second proposed solution and all works superb now!
Just a small reminder, the .map misses one ')'.
And very clean and mean :)
Have a nice evening!

[GeorgiRaichovGeorgiev]

Thank you very much @LinusBorg ! GOD bless you ♥ !
I hade the same or very similar problem and took me almost all of the day to debug and search what's the problem and I didn't understand. But when I first added the dynamic routes and only then I registered the Vue Router ( app.use(router) ), the problem was solved and Vue Router found my dynamic routes!

[focussing]

Well another example why I always get the goosbumps when these kinds of messages pop up :)