Tutorial

Introduction to Routing in Vue.js with Vue Router

Published on April 2, 2017
author

Joshua Bemenderfer

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:

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Joshua Bemenderfer

author

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.

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more