Getting Started with Vue Router
Tags: vue, javascript, beginners
Published: 2017-12-19 00:00:00

---
title: Getting Started with Vue Router
description: You can develop full Single Page Applications with ease using Vue's super easy to use Router Plugin. Keep reading to learn more about it.
published: true
tags: vue, javascript, beginners
---

Vue.js is my go to Framework for building dynamic Javascript user interfaces. The thing I love the most about Vue.js is that it’s so easy to get started with it. Depending on your needs, you simply need to add a little script tag to your page, and you can embrace a great amount of the beauty of Vue. 

Just in case you didn’t know, Vue-Router is a Vue.js plugin to add routing to your  application. In this case, I’ll share with you a bit about how to get Vue-Router installed and setup so you can start building SPA’s in no time.

## Install it
You can install `vue-router` using npm or yarn. Simply run any of the following commands in your terminal and you’re ready to keep going. 
`npm install vue-router`
or
`yarn add vue-router`

## Configure it
When using a module system, you need to tell Vue.js that it must use the VueRouter plugin. 
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import router from './router';

const app = new Vue({
    el: '#app',
    router, // same as router: router
});
```
After configuring Vue to use the vue-router plugin, you need to let the parent component know that it should use that router instance.

Following the previous steps, you now have `vue-router` installed and configured and can start building out your routing configuration.

## Structure your application
They are many ways you can structure your application, but I mostly choose to do mine as follows:
- I have a `router/` folder inside the directory where I keep my scripts. 
- Inside the `router/` folder, I create two files, `index.js` and `routes.js`

### `index.js`
First of all, I choose to call this file index.js because when using a module system, I can import it simply by using the following command: `import router from './router'`. Notice I don’t need to specify the filename since modules systems will look for an `index.js` file by default. 
```javascript
// router/index.js
import VueRouter from 'vue-router'; //Import vue-router
import routes from './routes'; // Import my routes

//Export a new VueRouter instance
export default new VueRouter({
    mode: 'history',
    base: '/home/',
    routes,
});
```
They are a few things here that might not be clear to you at first glance. Let me explain each one. 
The `mode` attribute by default is set to *hash mode* which adds a `#` to the url. In my case I set it to `history` mode to prevent that and also to leverage the history.pushState API to achieve URL navigation without a page reload.
The `base` attribute is to set a base url section from which all the routes will extend. For example, if we set a route to `/dashboard` , vue-router will actually look for the url `/home/dashboard`. 
You can omit both of those attributes is you’re not looking for that behavior. 

```javascript
// router/routes.js

// Here we import our Vue Components
import DashboardPage from '../pages/Dashboard.vue';
import Error404 from '../pages/errors/Error404.vue';

// the routes are simply an array of objects
const routes = [
    {
        path: '/',
        redirect: '/dashboard'
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: DashboardPage
    },
    {
        path: '*',
        name: '404',
        component: Error404
    }
];

export default routes;
```
Most of the Route objects needs to have at least two attributes, the `path`  it should match and the `component` it should display when that path is matched. 
The last object in the array with that wildcard `*` as the path, is used to show a 404 page for any route that was not matched. You are not required to have it, it's just an example on how to handle 404 errors with the router.

## Ok, I have it setup, how do I use it now?
Navigating your the routes you have defined is very straight forward using two special elements Vue Router provides out of the box, they are `<router-link></router-link>` and `<router-view></router-view>`.

The `router-link` component renders by default an html `a` tag. You can specify what element you want to be rendered with the `tag` property. The `to` property is used to specify what route should be followed once the element is clicked.
```html
<ul>
    <router-link tag="li" to="/dashboard" class="list-group-item">
        Dashboard
    </router-link>
</ul>
```

Before you can see each component rendered on your page, you need to make use of the `<router-view>` element. Using this element is very straight forward; simply add the element anywhere in the page where you would like your components to be mounted.
```html
<div class="row">
    <div class="col-md-12">
        <!--All components will be mounted here-->
        <router-view></router-view>
    </div>
</div>
```

# Conclusion
Vue.js is a very easy to use javascript framework, and it's router plugin proves this once again. In just a few seconds,you can easily have a javascript router installed, configured and working on your application. 

Is there anything I missed in this post? Share it with me on [twitter](https://twitter.com/wilburpowery)