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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store