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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.