页面加载时的 vue-router 动态路由

Question

Using vue-router 3.0.6

I have several landing pages, whose URLs are loaded on page load via an API.

I wait to render <router-view /> until this API call has resolved.

When it has resolved I run this.$router.addRoutes(routes)

However once router-view is render, I get a 404 route rendered.

If I navigate to the homepage and click a link to the dynamic landing page I was originally trying to access on load it works fine .

Is there some function to get vue-router to re-evaluate it's available routes, something that might be happening during the route change to the homepage that allows the next navigation to the dynamic page work?

First load -> /dynamic-route = 404

First load -> /dynamic-route -> 404 -> homepage -> /dynamic-route = OK

Answer 1

when you match /dynamic-route directely, maybe the addRoutes did not work. so it would math 404. you can make the function of addRoutes work using the function of beforeEach when you change your route.

Answer 2

Old question but if anyone is stuck on this, you need to perform the operation that sets the routes before calling Vue.use(router) in Vue 2 or app.use(router) in Vue 3.

This is because installing the router plugin immediately triggers an operation to match the initial path. Since the route you wish it to detect is not registered at that time, it gets missed.

It does not matter if you show/hide the router-view component based on a flag variable since the path matching operation has already been completed by then.