Sometimes, we want to create a 404 component in Vue.js and Vue Router.

In this article, we’ll look at how to create a 404 component in Vue.js and Vue Router.

How to create a 404 component in Vue.js and Vue Router?

To create a 404 component in Vue.js and Vue Router, we add a catch all route in our routes declaration.

For instance, we write

const routes = [
  //...
  { path: "/404", component: NotFound },
  { path: "*", redirect: "/404" },
  //...
];

to add a /404 route which renders the NotFound component.

Then we add the catch all route by adding an entry with path set to '*' and redirect that to /404.

Conclsuion

To create a 404 component in Vue.js and Vue Router, we add a catch all route in our routes declaration.