// Tutorial //

Introduction to Routing in Vue.js with Vue Router

Published on April 2, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
Introduction to Routing in Vue.js with Vue Router

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

main.js
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.

App.vue
<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

our-routes.js
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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!