0

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

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

这是我的代码：

路由.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>

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

谢谢！

4

3 回答 3

1

你不需要使用this让v-for我们先修复那个部分。

更新

路由器.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......

于 2020-07-27T09:15:33.380 回答
1

你应该在的中使用canzone而不是nameparamsPolaroid.vue

  <router-link :to="{ name: 'polaroid', params: { canzone: canzone.path } }"> {{ canzone.nome }} </router-link>
于 2020-07-27T09:16:14.037 回答
0

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

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

获取您不应该编写的数据，{{$route.params.canzone}}但 {{$route.params.name}}“名称”是您通过路线传递的数据

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

但如果你想那样做，你需要得到这样的数据this.$route.query.canzone

于 2020-07-27T10:20:33.983 回答