No match found for location with path - Vue 3 + Vue Router 4

Question

I need to create routes dynamically within a Vue application. I have created a basic component on this code sandbox link.

The issue that I am encountering is that on first load the home page is returning a 404, even though the route has been added within the created() lifecycle of the app. I understand that the issue with this is that the navigation is triggered before app creation and therefore that is why when navigating on the app, the navigation resolves itself.

On my higher scale application, the error returned is (not showing on Sandbox because the Not Found page is defined):

[Vue Router warn]: No match found for location with path "/"

Please do not provide solutions that include adding the routes upon initialising the VueRouter because I specifically need to add them in the created() lifecycle of the app since the data I will be receiving will be from an API and I would need to handle it there.

I have tried using navigation guards but I have not managed to solve the issue as of yet.

Let me know what I am doing wrong and how I can go around solving this issue please. Any help is greatly appreciated.

Thanks in advance.

Good day to you all. :)

Answer 1

You need to trigger a new navigation after the route is added: https://next.router.vuejs.org/guide/advanced/dynamic-routing.html#adding-routes