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.
I believe it's because of lack of slash
router.replace("/notFound");
You could also do
router.replace({name: "notFound" });