CODEWITHSUNDEEP
vue.jsvue-componentvue-routervue-props
nicoblue
nicoblue

Reputation: 101

Vue Router pass data between two components using router-link

I'm working on a SPA website and I'm trying to pass some data between two components using a router-link.

Basically I have an "Album" component (here called Polaroid) which contains in its 'data' all the album songs' lyrics. Then I have a Song component (here called Canzone) where I want to pass dynamically the lyrics for each song, based on the clicked song obviously.

This is my code:

routes.js

import Polaroid from './components/albums/Polaroid'
import Canzone from './components/songs/Canzone.vue'

export default {

    mode: 'history',
    linkActiveClass: 'font-bold',

    routes: [

        {
            path: '/polaroid',
            component: Polaroid
        },

        {
            path: '/polaroid/:canzone',
            name: 'polaroid',
            component: Canzone
        },
    ]
};

Polaroid.vue (this is the Album component where I show the songs' list)

<template>
<div>
  <ul class="leading-7">
    <li v-for="canzone in this.canzoni" :key="canzone.nome" >
      <router-link :to="{ name: 'polaroid', params: { name: canzone.path } }"> {{ canzone.nome }} </router-link>
    </li>
  </ul>
</div>
</template>

<script>
    export default {
         data(){
             return {
                canzoni: [            // all the songs
                    {
                    nome: 'Song1',
                    path: 'song-1',
                    numero: 1,
                    testo: 'lyrics1'
                    },
                    {
                    nome: 'Song2',
                    path: 'song2',
                    numero: 2,
                    testo: 'lyrics2'
                    },
                    {
                    nome: 'Song3',
                    path: 'song3',
                    numero: 3,
                    testo: 'lyrics3'
                    },
                ],


            };
        },
    }
</script>

Canzone.vue (this is the Song component where I want to show the song lyric dinamically)

<template>
<div>
     
    LYRICS HERE

    {{ $route.params.canzone }}      // not working

</div>
</template>

<script>
    export default {
        
    }
</script>

How can I pass the data through the router-link? Thanks!

Thanks!

Upvotes: 3

Views: 6228

Answers (3)

Zhan Zhaksilik
Zhan Zhaksilik

Reputation: 1

set props: true in your routes like this

routes: [
    {
        path: '/polaroid',
        component: Polaroid,
        props:true
    }
]

to get that data you shouldn't write {{$route.params.canzone}} but {{$route.params.name}} as 'name' is what you are passing through the route

also you don't need to create another route passing canzone as a query

but if you want to do it that way, you need to get that data like this.$route.query.canzone

Upvotes: 0

firefly
firefly

Reputation: 906

you don't need to use this in v-for let's fix that part first.

UPDATED

router.js

We need to fix router.js as well to get a proper path.

    {
        path: '/polaroid/:id', // I gave a ID
        name: 'polaroid',
        component: Canzone
    },

So after giving the ID, we need to pass the id as well in params. Using index for the id

main template

<template>
<div>
  <ul class="leading-7">
    <li v-for="(canzone,index) in canzoni" :key="conzone.nome" >
      <router-link :to="{ name: 'polaroid', params: {id: index, canzone: canzone} }"> {{ canzone.nome }} </router-link>
    </li>
  </ul>
</div>
</template>

As you see I am sending the params as a object. I guess it has much more benefits with this way. But of course you can send just the path as a string as well...

the other template

<template>
<div>
     
    LYRICS HERE

    {{ canzone }}      // should work

</div>
</template>

<script>
    export default {
        props:{
          id:{
            type: String|Number,
            required: true,
          },
          canzone:{
            type: Object,
            required: true,
          }
        }
    }
</script>

PS: If your params: {canzone: canzone.path} then this means you are sending a string. So you should change the primitive prop type to string too...

Upvotes: 1

Terence Cheng
Terence Cheng

Reputation: 594

You should use the canzone instead of name in the params of the Polaroid.vue

  <router-link :to="{ name: 'polaroid', params: { canzone: canzone.path } }"> {{ canzone.nome }} </router-link>

Upvotes: 1

Related Questions