How To Use Vue Router Step By Step 2020

Let's see how to use vue router in our application. so i am assuming you have a vue application already up and running where you want to use vue router. If not then you can create your application from here. Once all is set we need to install vue router.

CODE USED IN THIS GUIDE CAN BE DOWNLOADED FROM OUR YOUTUBE VIDEO DESCRIPTION LINK.

Step by step explained Vue-router with examples, Code zip also available for download

INSTALLING VUE ROUTER

 npm install vue-router --save

So open terminal. and navigate to your application folder and run above given npm command. It will install vue-router. Now its time to include it in our application. So in project go to src/main.js and open it with any text editor.

Here include vue-router and create a instance of it. Look this example

 import Vue from 'vue'
import App from './App.vue'

//INCLUDING VUE ROUTER
import VueRouter from 'vue-router'

//TELLING VUEJS TO USE VUE ROUTER
Vue.use(VueRouter)

//CREATING INSTANCE OF VUE-ROUTER
const router = new VueRouter({
  routes,
  mode:'history'
})

//VUE JS APP 
new Vue({
  render: h => h(App)
}).$mount('#app')

Notice we imported the vue-router and than created its instance so we can pass routes.

Let's Create Routes

Go to application folder and inside "src" directory create a file with the name of "Route.js". You can name it anything. Inside this file we will call few components and also will define paths.

 //IMPORTING COMPONENTS (Create some components and import like this)
import About from './components/Pages/Aboutus.vue'
import Blog from './components/Pages/Blog.vue'
import Home from './components/Pages/Home.vue'
import Address from './components/Pages/Address.vue'



//DEFINING PATHS AND CREATING CONSTANT
export const routes = [
    { path:'/about', component: About},
    { path:'/blog', component: Blog},
    { path:'/', component: Home  },
    { path:'*', component: Home  }
]

Above given code defines few paths. You can create components and can include them like this. If you see carefully we are saying if user goes to route "/about" then load component "About". And as we are calling the components above as "About". This will work. But we need to include these routes in our vue application. so in src/main.js file call "Route.js". See here

 import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

//CALLING ROUTE.JS AS ROUTES
import { routes } from './Route.js'

Vue.use(VueRouter)

//ATTACHING ROUTES TO ROUTER BY PASSING "routes"
const router = new VueRouter({
  routes,
  mode:'history'
})


Vue.config.productionTip = false

//ATTACHING ROUTER TO OUR APPLICATION
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

In above code we included "Route.js" and passed inside vue-router instance so router can have routes. Then at last we passed router in our application. So we can use vue-router.

Adding Router Links

It's time to add router-links to our app also router-view as well. See this src/App.vue file.

 <template>
  <div id="app" align='center'>
    //ROUTER LINKS 
    <router-link class="router-link" to="/">Home</router-link>
    <router-link class="router-link" to="/blog">Blog</router-link>
    <router-link class="router-link" to="/about">About Us</router-link>
    
    <div class="container"> 
      //ROUTER VIEW FILE WILL RENDER COMPONENTS HERE
      <router-view></router-view>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  
}
</script>

We included 3 router-links ( It is quite similar like adding anchor tag but in vue-router we use router-link instead anchor tags ).

Each component will be rendered on "app.vue file". Where we called "router-view". So if user clicks on blog "router-link. The content of blog component will be displayed through "router-view"on "src/App.vue" file.

"So here we have added 3 components with router-links and rendering them on "src/App.vue" components using "Router-view". Hope it is useful. Let me know what things you do to make your application fast usage of vue-router or some other approach.

Check Out Advanced Concept Guide Here With Code Zip