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.

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>

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 } ]; 

You’re probabaly 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> 

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