Passing props through router-link [SOLVED]

Hello everyone,
I’m having a problem. It should be very simple but for some reasons, I can’t get it to work.

I have this component called Places. Inside of it, I have this block of code:

<ul>
  <li v-for="detail in placesDetails"> 
    <h3>{{ detail.name }}</h3>
    <p><span>Address:</span> {{ detail.formatted_address}}</p>
    <p><span>Phone number:</span> {{ detail.international_phone_number }}</p>
    <router-link v-bind:to="'/places/' + detail.place_id">View more</router-link>
  </li>
</ul>

(placeDetails comes from the Vuex Store, it is made of some data retrieved from an AJAX call).

The router-link will take the user to another dynamic component (another page), called singlePlace.
In this component, I would like to show some data retrieved from the Places component, such as the title, the address etc… How can I pass these data through router-link? I tried for hours, I read on the official documentation, but I failed.

I would like to make something like this (notice that the following code is not correct, its purpose is just to show how I would do this):

In Place component I would have:
<router-link to="'/places/' + detail.name}" detailName="detail.name">View more</router-link>

And in singleComponent I would have:
<h2>{{ detailName }}</h2> or something similar.

I hope you understand what I need.
Also, this is my routes.js file if you need it:

import Home from '../components/Home.vue';
import Weather from '../components/Weather.vue';
import Account from '../components/Account.vue';
import Places from '../components/pages/Places.vue';
import Food from '../components/pages/Food.vue';
import Events from '../components/pages/Events.vue';
import SinglePlace from '../components/pages/places/SinglePlace.vue';
import Credits from '../components/Credits.vue';


export default [
  { path: '/', component: Home },
  { path: '/weather', component: Weather },
  { path: '/account', component: Account },
  { path: '/places', component: Places },
  { path: '/food', component: Food },
  { path: '/events', component: Events },
  { path: '/places/:id', component: SinglePlace },
  { path: '/credits', component: Credits }
]

Thank you very much in advance and sorry if you find my question stupid.

Give this a try:

<router-link :to="{ name: 'places', params: {placeName: detail.name } }">more..</router-link>

routes.js

{
   path: '/places/:placeName', 
   name: 'places', 
   component: Places
}
4 Likes

To make routes.js easier to read and maintain you can also write it up as such:

{
   path: '/places/:placeName', 
   name: 'places', 
   component: require('./components/pages/Places')
}
1 Like

It works perfectly, thank you. I also found a similar example in the official docs.
Before, I tried to do that:

<router-link :to="{ path: '/singlePlace/ + detail.id', params: {placeName: detail.name } }">more..</router-link>

And it didn’t work. Please, can you tell me why does it work with name?
Anyway, thank you again.

Indeed, using name I’m able to pass a variable inside params object. Official vue-router docs state one should better update a prop via <router-link>, while catching this prop’s value in the component. Unfortunately I’m a nb to vue.js and I spent hours trying to achieve this:

Given routes.js:
{path: '/places', name: 'places', props: { someUnrelatedVar: 100 }, component: Places}

and Places.vue:
<template><p>Now in Places. Unrelated ID: {{ someUnrelatedVar }}</p></template>
<script>export default{props: ['someUnrelatedVar']}</script>

and a router link:
<router-link :to="{name: 'places', props: { someUnrelatedVar: 101 } }">Places, but 101</router-link>

I’m getting “Now in Places. Unrelated ID: 100” on /places load, which is fine, but not “Now in Places. Unrelated ID: 101” when I visit /places through the Places, but 101
I’m sorry to have chewed it on here but I’d really appreciate if anybody could point me to the (surely, simple) mistake I make.

Thanks, have a great weekend!


UPD: It works like this:
{path: '/places', name: 'places', props: true, component: Places}

Now I can send someUnrelatedVar via link:
<router-link :to="{name: 'places', params: { someUnrelatedVar: 101 } }">Places, but 101</router-link>

Maybe it helps someone… It just seems a bit strange, that

  1. props are passed under params
  2. you need to use name in a <router-link :to>, not a path
4 Likes

This is the only answer works for me. Thank you very much!

how to pass the collection of values from parent to child using route link


EnrollStudents

1 Like

Hello Venkata_krishna did you got any solution for your question?

bhanu _reddy no

Hi all, I’m trying to get params working in a but still get “undefined”…
Sometimes they works, like they are part of some async function, but the rest of the time they still undefined… someone faced the same issue and find any solution?

1 Like

This post was flagged by the community and is temporarily hidden.