vue-router dynamic routes on pageload

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

astonTY astonTY · Accepted Answer · 2019-07-18T10:36:54

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.

vue-router dynamic routes on pageload

1 Answers