Routing in Vue with Vue Router

As I mentioned in my previous post on Routing in React, a lot of frontend frameworks are single page applications. This means that, since you are not doing GET requests to a server every time a user moves between “pages”, the URL of the site will not automatically change. Vue Router is made so that you can do client-side routing for a vue application to make the URL change depending on what a user sees on the page.

There are a few ways to add Vue Router to a Vue application. If you are downloading Vue with a script tag in your HTML, you can add the script for vue-router as well:

<script src="/path/to/vue.js"></script>        // for vue in general
<script src="/path/to/vue-router.js"></script>   // for vue-router

You can also install it to a project using npm, like so:

// ♥ > npm install vue-router

But throughout this post I’ll be talking about how to use vue-router in a project started with vue-cli. You can either install it or add it with this command:

// ♥ > vue add router

But be careful when you run this command, because it will overwrite your App.vue file, so either plan to add vue-router before you start to work on the project, or backup your App.vue file before you add it. This command is the simplest way to add vue-router to a project, but it doesn’t really explain what happens when you run the command, so I’ll give you a rundown each of the things that are added, and the changes it makes.

First off, it changes a few files, obviously App.vue, but also main.js. In main.js, it imports router from react-router, and adds it to the main Vue instance for your application, so you can use it at the top level of your app. The differences are shown below in bold:

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

In App.vue it adds something called router-view inside the template of App, so the application will show whichever component that matches the route in the URL within the App component:

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

Lastly, it adds folders called router and views. In the views folder, it generated some basic example .vue files, About.vue and Home.vue, so you can see Vue Router in action by having different pages to navigate between. The router folder has only one file, index.js, and this is where most of the stuff you need to use vue-router is kept. The file takes care of creating a new VueRouter and exporting it to be used in the rest of the app. The only thing you need to pay attention to is the list of routes, because this is where you will define all the routes you want in your app. The index.js file looks something like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  // this is where you put all your routes
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

There are a few ways to define a route, but the main one is by importing the component you want to use at the top of the file, and making an object to add to your list of routes, like this:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

The way to navigate between these routes on a page is by using router-links. In the changes to the App.vue file that vue add router makes, they add a basic navigation bar above the router-view but I prefer to make the NavBar its own component. To use a router-link, you just need to pass each one a path to go to:

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

But sometimes, you want a route to be different depending on the user who is logged in, or the id of the individual item you’re looking at. This is where dynamic routes come in. When defining the route path, the dynamic part is denoted by a :. For this example, lets say we have an app that lets you see a list of books and when you click on one, you can go to the page for a single book. The route for this would look something like this:

{
  path: '/books/:book_id',
  name: 'Book',
  component: Book
}

To use this path in a router-link, you just need to pass a dynamic path to it. For example:

computed: {
  path: function () {
    return `/books/${this.book.id}`
  }
}

And once you’re in the Book component, you can access the id that is defined in the route by using $route.params.id.

One thing to take into account when using vue-router is that, since you’re no longer referencing the components you’re using in the App component, you have to pass props down differently. If you have some data in App that you want some component in the vue-router tree to access, then you have to pass it to router-view. This way, any component that is used in the router has access to what you pass from App, as long as you define it as a prop in the component that needs to use it.

One last thing I’ll talk about is programmatically changing what route the page is on. For example, once a user has submitted a form, like when they sign in, you might want to redirect them to a different page. The way to do this is to use $router.push() in the event that’s triggered when the form is submitted. You should pass the push function whatever path you want the user to be redirected to.

And with this, I have covered the basics of using Vue Router in a Vue application. Making sure to have good routing in any application is definitely best practice. Without routes, a user can’t save favorite pages, or start from the same page even if they refresh the app. And having a navigation bar to move through an application is almost required to make a good app these days. So, whenever you are making a project with Vue, it is a good idea to add Vue Router to make your app more accessible.