Table of Contents
URL: https://www.progressiverobot.com/vuejs-intro-to-routing/
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:
[label 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.
[label 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
[label 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.
