Vue Router Tutorial - Using Vue's Router Library

Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example

Vue offers vue-router, which is their own router library that you can use to set up page paths and routes within your Vue application. In this tutorial, we're going to integrate the vue-router and setup a simple navigation with two different components.

Let's get started!

Using Vue 2 to Create Beautiful SEO-Ready Websites

Vue Tutorial in 2018 - Learn Vue.js by Example

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Installing the Vue Router

When we used the Vue CLI to start our project, we did not include the vue-router package. This is an option that you're able to specify while starting the project by selecting the manual configuration option.

No worry, though, we can add in the vue router ourselves.

First, visit the project folder within the console and run the following command:

> yarn add vue-router

Note: Our project is using yarn, but if you're using npm, you can install it with npm install vue-router --save

Next, we have to create a /src/router.js file with the following contents:

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

This imports our Skills.vue component, along with an About component, which doesn't yet exist.

Go ahead and create that file real quickly and paste in the following contents:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali...</p>
  </div>
</template>

Next, visit /src/main.js and add the following:

// other imports removed for brevity
import router from './router'

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

Next, visit the /src/App.vue file and modify the <template> section as shown:

<template>
  <div id="app">
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    <router-view/>
  </div>
</template>

We're adding a nav element with two links using the Vue component router-link.

We've also added another Vue component router-view which denotes where the views will be placed when the user clicks on a nav item.

While we're here in App.vue, let's give our nav some style in the styles section of the component. Also, modify the body selector so that our UI is no longer centered vertically:

body {
  background-color: #EEEEEE;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  padding-top: 50px;
}

nav {
  padding: 20px 20px 20px 0;
}

nav a {
  padding: 10px;
  text-decoration: none;
  background: #fff;
  border-radius: 3px;
  color: rgb(0, 110, 255);
  font-weight: bold;
  margin-right: 15px;
}

Great!

Save it, and this should be the result in the browser:

Simple!

Passing and Reading Router Parameters

At times, you may need to grab data from the URL of your Vue app. Let's pass along a URL parameter called name to the about page.

Open up /src/router.js and modify the following:

    {
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About
    }

Next, visit the /src/components/About.vue file and modify the template section to show a their_name property we will define shortly:

<h1>Hello {{ their_name }}, this is an about page</h1>

Then, add a <script> section beneath the template section:

<script>
export default {
  name: 'About',
  data() {
    return {
      their_name: this.$route.params.name
    }
  }
}
</script>

You use the this.$route.params.name_of_router_param property to access the router parameter name that we specified in the /src/router.js file.

Save the project and visit /about/AnyNameHere and you will see that value displayed in the template!

Easy!

Bonus

It slightly bothered me that our list app did not have a way to remove items, so, if you're interested in that, here's how you can integrate that feature.

In /src/components/Skills.vue, modify the list item within the transition-group component wrapper to the following:

<li v-for="(data, index) in skills" :key='index'>{{data.skill}}
   <i class="fa fa-minus-circle" v-on:click="remove(index)"></i>
</li>

We're just using the v-on directive to call a method on click remove().

Let's define that method in the component logic:

  methods : {
      addSkill() {
        // Removed for brevity
      },
      remove(id) {
        this.skills.splice(id, 1);
      }
  }

Next, we'll import FontAwesome for the icon referenced in the template. At the top of the styles section add:

<style scoped>
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

And that's it!

Now, you can add and remove list items:

Conclusion

Hopefully, you now have a good understanding of Vue router basics!

This concludes our free beginner's crash course to Vue 2! Please use our search bar at the top to search for more Vue 2 tutorials and courses.