Getting Started with Vue Router

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.

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.

// 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.

// 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.

<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.

<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

Comments

[Darrell Washington]

You have convinced me that React Router is complicated for no reason in just a few minutes.

[Wilbur Powery]

I've used React Router in the past and you get used to it very quickly. But I'll always love the simplicity Vue offers with everything. Thanks for your comment Darell.

[Hatem Houssein]

Thank you for pointing out why you use history mode instead of the default hash.