In the bustling city of Lagos, there lived a talented artist named Nini. Nini was renowned for her captivating artwork, and she had a dream of sharing her creativity with art enthusiasts around the world. To do this, she decided to build a beautiful online gallery, and she wanted it to be an immersive experience. Nini's online gallery(web app) was like a treasure trove of her art, with a grand entrance (the header) and a charming description plaque (the footer). But she wanted her gallery to be more than just a static display. She wanted it to be an interactive journey. That's when she discovered Vue Router, a magical tool that could bring her vision to life. With Vue Router, Nini could keep the header and footer static, while only changing the artwork's content in the middle. It was like having a beautiful frame that held different pieces of art, and visitors could explore them by simply clicking around. As visitors explored Nneka's online gallery, they clicked on different artworks, and the magic of Vue Router took over. The header and footer remained the same, just like the entrance and description plaque in a real-world gallery. But the artwork in the middle transformed to match each piece, making it feel like a new exhibit with its own story. But the enchantment didn't stop there. Below each artwork, there was a description plaque that provided insights and Nneka's personal touch. Thanks to Vue Router, this plaque was transformed to give information and emotions specific to the artwork being viewed. If you were looking at a serene landscape, the plaque would talk about the artist's inspiration, and if you moved to a vibrant abstract piece, it would offer a different narrative. With Vue Router, Nneka's online gallery became an immersive art journey. Visitors could explore her collection, and with each click, the content in the middle of the frame would adapt, making the experience feel like a visit to a real-world gallery. Nneka's online gallery was a sensation in Lagos and beyond. Art lovers marveled at how Vue Router transformed her digital museum into an immersive and interactive art adventure, just like stepping into a captivating exhibition.

Now that we've understood the logic behind vue router, let's get our hands dirty.

1. Open your vue app on your Vscode

2 . Open your terminal

1. Type Vue add router on your terminal

2. Then import import router from './router' in your main.js file

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

1. It automatically adds a router folder, there is an index page

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

1. Then you route it in your App.vue file to enable your header component and footer component to show universally on all your pages

<template>
  <div id="app">
   <HelloWorld></HelloWorld>
    <router-view/>
  </div>
</template>