Vue Router 使用 router-link 在两个组件之间传递数据

Question

我正在开发一个 SPA 网站，我正在尝试使用路由器链接在两个组件之间传递一些数据。

基本上我有一个“专辑”组件（这里称为宝丽来），它的“数据”中包含所有专辑歌曲的歌词。然后我有一个 Song 组件（这里称为 Canzone），我想根据点击的歌曲动态地传递每首歌曲的歌词。

这是我的代码：

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（这是我显示歌曲列表的专辑组件）

<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（这是我想要动态显示歌曲歌词的 Song 组件）

<template>
<div>
     
    LYRICS HERE

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

</div>
</template>

<script>
    export default {
        
    }
</script>

如何通过路由器链接传递数据？谢谢！

谢谢！

Answer 1

在你的路线中设置 props: true 像这样

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

要获取该数据，您不应该写 {{$route.params.canzone}} 但是 {{$route.params.name}} as 'name' 是你正在通过的路线

您也不需要创建另一个通过 canzone 作为查询的路由

但如果您想这样做，您需要获取该数据 喜欢this.$route.query.canzone

Answer 2

您不需要在v-for 中使用this，让我们先修复该部分。

更新

路由器.js

我们还需要修复router.js 以获得正确的路径。

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

所以在给出 ID 之后，我们还需要在 params 中传递 id。将index 用于id

主模板

<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>

如您所见，我将参数作为对象发送。我想这种方式有更多的好处。但当然你也可以只发送路径作为字符串......

另一个模板

<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：如果你是params: {canzone: canzone.path}，那么这意味着你正在发送string。所以你也应该将原始道具类型更改为string...

Answer 3

您应该在Polaroid.vue 的params 中使用canzone 而不是name

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