Vue Router Does Not Replace the Whole Path

Question

The route I'm having trouble is the below one:

{ path: "/report/:reportid", component: ReportPage, name: "ReportPage", props: true, meta: { requiresAuth: true }}

This page hooks a request to the back-end. And if the result of the given reportid is null server responds with HttpStatusCode 404.

I handle the server response somewhere in my code as below:

else if (response.status == 404) {
    router.replace("notFound");

    return;
}

Here is the thing: I'm deliberately typing /report/1622222 to get a 404 response and when the code hit the above else if router transforms the path as /report/notFound thus I cannot render my actual "Not Found" page.

Normally, I'm handling not founds as below:

{ path: "/:notFound(.*)", name: "notFound", component: NotFoundPage }

But due to miss-manipulation I have described above does not trigger :notFound(.*) regexp. How should I handle this case?

(My Vue Router version is 4.4.3)

Thank you in advance.

Answer 1

I believe it's because of lack of slash

router.replace("/notFound");

You could also do

router.replace({name: "notFound" });