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.

Passing data to a router-link in Vue

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

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:

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:

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:

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

Passing data to a router-link in Vue

What if the route configuration was like this

It will not pass data.

Passing data to a router-link in Vue

Thank you for reading. I hope this post will help you. You can visit the Vue Router website to get more detail.