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:
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>
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
}
];
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>
There’s a lot more to routing, we’re just getting started! For more information, take a look at the official documentation.
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