Introduction To Routing In Vue.js

Introduction

In this article, we will learn routing in Vue.js from the beginning. Routing is a mechanism to redirect the users from one page to another page, and provides navigation from one page to another page.

Create VueJS Project

Create a Vue.js project by using the following command.

vue create multiselectapp

Install Vue Router

Now install Vue Router in the project by running the following command.

vue add router

Now right-click on the components folder and add three new components.

• Employee.vue
• Dashboard.vue
• Homedetails.vue

Project structure

Now create a folder named router and inside create a index.js file and add the following code.

import VueRouter from 'vue-router'
import Homedetails from '../components/Homedetails.vue'
import Employee from '../components/Employee.vue'
import Dashboard from '../components/Dashboard.vue'
const routes = [
  {
    path: '/Home',
    name: 'Home',
    component: Homedetails
  },
  {
    path: '/employee',
    name: 'Employee',
    component: Employee
  },
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  {
  path: '/Dashboard',
  name: 'Dashboard',
  component: Dashboard
}
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
export default router

Now open Dashboard.vue and add following code.

<template>
    <div class="hello">
  Welcome to Dashboard
    </div>
  </template>
  
  <script>
  export default {
    name: 'Dashboard',
    props: {
      msg: String
    }
   
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  </style>
  

Now open Employee.vue and add following code.

<template>
  <div class="hello">
    Welcome to Employee List
  </div>
</template>

<script>
export default {
  name: 'Employee',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Now open Homedetails.vue and add following code.

<template>
    <div class="hello">
        Welcome to Home Page
    </div>
  </template>
  
  <script>
  export default {
    name: 'Homedetails',
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

Now open App.vue and add following code.

<template>
  <div id="app">
    <nav>
      <router-link to="/Home">Home</router-link> |
      <router-link to="/Employee">Employee</router-link> | 
      <router-link to="/Dashboard">Dashboard</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Now open Main.js and add following code.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from 'vue-router';
Vue.config.productionTip = false
Vue.use(VueRouter);

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

Now, run the project by using following command.

npm run serve

Summary

In this article, we learned about routing in Vue.js applications.