Catching error paths

Other important routes that we always need to remember to handle besides the Home page ('/') include error routes, such as 404 Not found when the URL path doesn’t match any registered path, among others.

For 404 Not found, we can use the Regex pattern, /:pathMatch(.*)*, which stands for matching every other URLs, to collect all the cases that don’t match the definted routes. The router’s configuration should be located at the end of the array routes to avoid matching the wrong path:

{
    path: '/:pathMatch(.*)*',
    name: '404',
    component: () => import('../views/404.vue'),
  }

When we type the wrong path for /users, the output will be as follows:

Figure 7.34 – Redirecting to 404 when the /users path is not found

In this section, we looked at how to use the Regex pattern to create...