by Sai gowtham

Vue Router Creating 404 Page

In this tutorial, we are going to learn about handling 404 errors in vue router.

What is a 404 page?

A 404 page is also called not found page it means when a user navigates to the wrong path that doesn’t present in our website, we need to show them a not found page instead of blank page.

Creating 404 page

In your components folder create a new file called 404.vue and add the below code.

404.vue
<template>
  <div class="hello">
    <h1>(404) Page NotFound</h1>  </div>
</template>

<script>
export default {};
</script>

Now, in our routes array, we need to use the wild card (*) character as a path to handle the 404 errors.

import Vue from 'vue'
import App from './App.vue';
import VueRouter from "vue-router";
import Home from './components/Home.vue';
import Post from './components/Post.vue';
import NotFound from './components/404.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: '/', component: Home },
    { path: '/post', component: Post },
    { path: '*', component: NotFound }  ]
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Here we added a path:'*', so that if any user navigates to the wrong path they are seeing a Not found page.

vue 404 page

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY