How to add 404 page in Vue using vue-router

In this post, we will see how to add a custom 404 (Page Not Found) page using vue-router in Vue Js.

To add a 404 page in Vue, we have to first create your custom 404 page and then we have to catch all routes in our router configuration.

If the page is not found, then it redirects the user to the custom build 404 page using vue-router redirect option.

For example, in our router configuration file, we write

const routes = [
  { path: "/404", name:'PageNotFound', component: PageNotFound },
  { path: "*", redirect: "/404" },
];

Here, we have declared the 404 route, which renders the PageNotFound component.

Next, we have added an entry with path and set it to '*' to catch all routes and redirect it to the '/404' route.

So, now when a user navigates to a path that does not exist match any routes in the router config file, it will redirect the user to '/404' page, which will contain our custom "Page Not Found" message.

---

Related Topics:

How to redirect to another page in Vue

How to redirect to external URL in vue

How To Open Link in a New Tab in Vue?

Set URL Query Params In Vue Using Vue-Router