Introduction to Routing in Vue.js with Vue Router

Routing is an essential part of any non-trivial SPA, and should be a core part of any framework. For Vue, this functionality is provided by the official Vue Router plugin. Let’s take a basic look at how to use it.

Installation & Setup

First, of course, we need to install and enable the Vue Router plugin. Install vue-router using Yarn or NPM.

# Yarn
$ yarn add vue-router
# NPM
$ npm install vue-router --save

Then, we need to enable the plugin:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
// These are the routes we're going to create.
import ourRoutes from './our-routes.js';

Vue.use(VueRouter);

// We create the router instance here.
const router = new VueRouter({
  routes: ourRoutes
});

// The usual app stuff goes here.
const app = new Vue({
  //
  router,
  render: h => h(App)
}).$mount('#app');

One more thing. We need a place to render our routes to. For that, we use the <router-view> component.

<template>
  <div id="app">
    <h1>Random App Title</h1>
    <!-- Routes get rendered here -->
    <router-view></router-view>
  </div>
</template>

Defining Routes

Okay, let’s create some routes now. As you see above, we imported the as-of-yet nonexistent file our-routes.js. Let’s create that now.

A route definition is simply an array containing route objects. For the purpose of this guide, we’re going to assume you have three target routes: RouteOne.vue, RouteTwo.vue, and RouteOneChild.vue

import RouteOne from './RouteOne.vue';
import RouteOneChild from './RouteOneChild.vue';
import RouteTwo from './RouteTwo.vue';

export default [
  // Redirects to /route-one as the default route.
  {
    path: '/',
    redirect: '/route-one'
  },
  {
    path: '/route-one',
    component: RouteOne,
    // Children is just another route definition of sub-routes.
    children: [
      {
        // Note: No leading slash. This can trip people up sometimes.
        path: 'route-one-child',
        component: RouteOneChild
      }
    ]
  },
  {
    // Route two takes the route parameter "id".
    // The parameter value can be accessed with $route.params.id in the RouteTwo component.
    path: '/route-two/:id',
    component: RouteTwo
  }
];

Linking to routes

You’re probably going to want to link to routes in your app. Instead of using a normal <a> tag, use <router-link> instead. Router-link takes a to property that can be static or dynamic.

<router-link to="/route-one/route-one-child">Text!</router-link>
<router-link :to="myRouteTargetString">Dynamic!</router-link>

Documentation

There’s a lot more to routing, we’re just getting started! For more information, take a look at the official documentation.