The router is one of the important topics when we build single-page applications with Vue, there are a few things that I wish to know to begin and really helped me get basic tasks with VueRouter.

I’m going to assume you’re already working with Vue and want to start to use VueRouter in your existing or new project.

If you want to follow the next examples, a spa with Vue CLI 3.2.1 or high, pick the default option to setup babel, ESLINT and skip add VueRouter by default.

1- Install vue-router and attach to Vue

Into the project directory run the npm command for install the vue-router

npm install vue-router

Configure the Vue instance to use the Vue router.

Edit the main.js into the src directory and add a reference to VueRouter and using Vue.use attach it to the main instance.

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),

Mission completed! .. but by default, the router adds/#/ in the URL.

2- Remove hashMode behavior.

By default router use hashMode, to get rid off #. Set mode property to ‘history’ on the VueRouter initialization.

const router = new VueRouter(
    { routes, mode: 'history'})

3- Navigate using router links and add style to the active link.

Every route defined in routes.js can be accessed using the to attribute in the <router-link> component.

    <router-link to="/">Home </router-link>
     <router-link to="/posts">Posts</router-link>

By default, the router link adds the css class “router-link-active” in “a” element when it matches the URL.

To change the default behavior set the active-class attribute with a custom css class and also to avoid the problem with “/” add parameter exact, it will force the url have to match fully the router link.

           <router-link to="/" active-class="selected" exact>Home </router-link>
            <router-link to="/posts" active-class="selected" exact>Posts</router-link>


    export default {
        name: "Menu.vue"

<style scoped>
    .selected {
        border: 1px solid salmon;

4- Navigate using the $router

Sometimes we need to move between components when the user does some action but without the user click in some the router-link.

The router has the push method for moving between routes.

    <h2>HelloWorld Component</h2>
    <el-button @click="gotoPosts">Go to posts page</el-button>

export default {
  name: "HelloWorld",
  methods: {
    gotoPosts() {

5-Setting and reading router parameters.

Read and send parameters is a common task in our and the router can help to solve with few lines of code.

Back to routes.js file and include in the router path our parameter: like :name and ? if want converts the parameter as optional.

import HelloWorld from "./components/HelloWorld";
import Posts from "./components/Posts";
export const routes = [
  { path: "/", component: HelloWorld },
  { path: "/posts/:name?", component: Posts }

We can read the name parameter using this.$route.params object provides access to all url params example: http://localhost/posts/dany

data() { return {
    selected: this.$,

6- Bind dynamic params and query strings

The router-link can accept dynamic params using v-bind in the to property.

    <div class="row">
            <li v-for="article in articles" :key="">
                <router-link v-bind:to="'posts/' +" >{{article.description}}</router-link>

    export default {
        name: "Posts",
        data() { return {
            selected: this.$,
            articles: [ { id: 1, description: 'Lebron out '},
                { id: 2, description: 'Curry out '}

The query string is a common way to pass values between pages like http://localhost:8080/posts?limit=3 The route gives to us access to query string like the params.

limit: this.$route.query.limit ? this.$route.query.limit : 2,

7- Child and named Routes

To set up nested or child inside the component posts like post/1 or posts/1/edit, add children property inside our ‘/post’ route.

{ path: '/posts', component: Posts,
    children: [
        { path: ':name', component: Details},
        { path: ':name/edit', component: Edit}

Like the App.vue add another <router-view> in the posts.vue component.


And don’t forget to update the router link with the new route.

<li v-for="article in filterArticles" :key="">
    <router-link :to="'/posts/' + article.description" >{{article.description}}</router-link>
    <router-link :to="'/posts/' + article.description + '/edit'"> Edit </router-link>


Yes… is ugly and nasty, but calm.. we can identify our routes with names using “name”, back to route.js and add attribute name.

{ path: ':name/edit', component: Edit, name: 'edit'}

Using the name for our routes we can write cleaner and meaningful router link passing an object with props name and params.

:to="{name: 'posts', params: {name: article.description}}" >{{article.description}}
:to="{name: 'edit', params: {name: article.description}}"> 
Edit </router-link>

8- Redirect and Route Wildcards

If we want to redirect our user from someone’s path to another set attribute redirect with the path our named route.

{path: '/login', redirect: '/posts'}

Using * in the path attribute it catches all no don’t exist routes in our routes like http://localhost/lalsdalksdlkasdlkjads.

{ path: '*' , redirect: {name: 'posts'}}

9- Using Guards to protect routes.

To keep control of the navigation like when the user entering or leave a component or route, using the beforeRouteEnter, beforeEach and beforeRouteLeave methods.

These methods accept a function as an argument with tofrom and next params.

The Next parameter is a function to abort or continue the navigation, it accepts a path as “/posts” or false to abort navigation and we can read the requested route using to params.

Our first steps create the login component and set the route, add a method for saving in localStorage the key authkey and assign to the login button.

       <el-button @click="setToken">Login</el-button>
   export default {
       name: "Login",
           setToken() {

Then configure the route in route.js

{ path: '/login', component: Login}

Configure as Global
Calling beforeEach in the main.js file, it will be executed for all routes defined in routes.js.

The next example is calling the beforeEach method and read if the requested path is not login, we will check if the browser has authkey in the localstorage to allow continue or be moved to the login component.

router.beforeEach((to, from, next) => {
 if(to.path !== ‘/login’) {
 localStorage.getItem(‘authkey’) ? next() : next(‘/login’)
 else {
})new Vue({
 render: h => h(App),

The setup inside the components is very similar, but using the methods beforeRouterEnter and beforeRouteLeave with the same functionality and only affect our current component.

beforeRouteEnter(to, from, next){
 localStorage.getItem(‘authkey’) ? next() : next(false)
 localStorage.getItem(‘authkey’) ? next(false) : next()

That’s it!

Hopefully, that will give you a bit of a head-start on VueRouter, and help you avoid some of the more common mistakes. If you enjoyed this post, please share it.