To use routing in VUE JS, we have to follow the below mentioned steps.

BY Best Interview Question ON 08 Jun 2019


  • Create three component files, as shown below.

            // Home.vue





          export default  {



  • Now, create About.vue file with the following syntax.

           // About.vue


            <h1>About us</h1>



               export default {



  • Create the Contact.vue file with the below mentioned syntax.

            // Contact.vue


             <h1>Contact us</h1>



              export default {



  • To proceed, now update the update index.html file and continue by adding app id attribute.
  • Import the Vue-router module in the main.js file from a node_modules folder and copy the below-mentioned code to the main.js file.

           // main.js

            import Vue from 'vue';

            import VueRouter from 'vue-router';


           import Home from './components/Home.vue';

           import About from './components/About.vue';

           import Contact from './components/Contact.vue';

             const router = new VueRouter({

            mode: 'history',

            base: __dirname,

            routes: [

            { path: '/', component: Home },

            { path: '/about', component: About },

            { path: '/contact', component: Contact }



     new Vue({


            template: `


             <nav class="navbar navbar-toggleable-md navbar-light bg-faded">

             <div class="collapse navbar-collapse" id="navbarNav">

             <ul class="navbar-nav">

                 <li class="nav-item"><router-link to="/" class="nav-link">Home</router-link></li>

                 <li class="nav-item"><router-link to="/about" class="nav-link">About</router-link></li>

                 <li class="nav-item"><router-link to="/contact" class="nav-link">Contact</router-link></li>




      <router-view class="view"></router-view>



  • Run the code and get the final output.