Passing data to a router-link in Vue.JS
Tags: vue, javascript
Published: 2018-06-02 11:13:18

---
title: Passing data to a router-link in Vue.JS
published: true
description: Passing data to a router-link in Vue.JS
tags: vue, javascript
---

![Vue Logo](https://thepracticaldev.s3.amazonaws.com/i/xwksyh8ymjr93sh2fgw5.png)

[This post was first posted on my blog](https://aligoren.com/passing-data-to-a-router-link-in-vue-js/)

Hi. In this post I’ll show how to pass data to a router-link in Vue.JS. Let’s assume we have a Vue project created by vue-cli. We have one component its called **HelloWorld**. By default there is a one component named HelloWorld. We will create new component named **Profile**.

For example you don’t want to use query strings like this:

```
https://localhost/#/profile/2
```

You can use params as props without query strings. Let’s start.

## Creating Profile.vue Component

I’ll create a Vue component named **Profile.vue**. It will like this:

```vue
<template>
    <div>
        {{ welcome }}
    </div>
</template>
 
<script>
export default {
    name: 'Profile',
    props: ['msg'],
    data() {
        return {
            welcome: 'This is your profile'
        }
    },
    mounted() {
        if (this.msg) {
            this.welcome = this.msg    
        }
        
    }
}
</script>
```

Above code contains prop named **msg** and above code returns an object named **welcome**. When someone open this page as directly should see **This is your profile** message. What if someone coming from another route?

## Modification in HelloWorld.vue

Let’s think about someone coming from another route thanks to router-link. Our component should like this:

```vue
<template>
  <div class="hello">
      <router-link :to="{ name: 'Profile', params: { msg } }">
         Go to your profile
      </router-link>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: `This is Ali's profile`
    }
  }
}
</script>
```

In above code, we have msg object to pass it to another route. When someone click to **Go to your profile** link, the page will redirect to **http://localhost:8080/#/profile** page. But we will not see any data when check to the Vue DevTools. Because we didn’t configure router file.

## Configuration of the Router File

Router file should like this:

```javascript
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Profile from '@/components/Profile'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      props: true
    }
  ]
})
```

As we see the profile route has the props key and it’s value equals true. Let’s check to the Vue DevTools.

![Vue Pass Data to Router Link](https://thepracticaldev.s3.amazonaws.com/i/h7l4m3fperz2trhfb6aj.png)

What if the route configuration was like this

```javascript
{
  path: '/profile',
  name: 'Profile',
  component: Profile,
  props: false
}
```

It will not pass data.

![Vue Pass Data to Router Link](https://thepracticaldev.s3.amazonaws.com/i/zy5aajh1nwjm8spnr1ud.png)

Thank you for reading. I hope this post will help you. You can visit the Vue Router [website](https://router.vuejs.org/) to get more detail.