Showing 404 error page in Vuejs

It’s common to show a 404 error page if a user goes to a wrong path that is not on our website. A 404 error page is used to show the user a not found page instead of a blank page.

Here I will show handling 404 error page in Vue router.

For the 404 error page, create a new component called NotFoundPage.vue and add the following code.

<template>
    <div>
        <center>
            <h1>404 not found</h1>
            <h2>it seems you're in the wrong page</h2>
        </center>
    </div>
</template>

Now go to the router.js file and add the following

import NotFoundPage from './compnents/NotFoundPage.vue
{
  path: '*',
  component: NotFoundPage
}

we have added the * character as the route for handling 404 errors. So if any user navigates to a wrong path, our NotFoundPage will be rendered.