Question

我想遍历对象数组，当我单击一个项目时，我想显示一个页面，其中填充了来自其他组件的数据。

这是我的router.js

{
    path: '/artists',
    component: () => import('../views/Artists/ArtistsStart.vue'),
    children: [
      {
        path: '',
        component: () => import('../views/Artists/Artists.vue')
      },
      {
        path: ':name',
        component: () => import('../views/Artists/Artist.vue')
      }
    ]
  }

ArtistsStart.vue仅包含<router-view>和过渡动画，所以我认为这不重要

Artists.vue

<template>
    <div v-for="(artist, index) in artists" :key="index" @click="artistLink(artist)">
        {{artist.name}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                artists: [{
                        name: 'artist 1',
                        route: 'artist1',
                        text: 'lorem ipsum',
                        imageUrl: ''
                    },
                    {
                        name: 'artist 2',
                        route: 'artist2',
                        text: 'lorem ipsum',
                        imageUrl: ''
                    }
                ]
            }
        },
        methods: {
            artistLink(artist) {
                this.$router.push(`/artists/${artist.route}`);
            }
        }
    }
</script>

我不使用<router-link>是因为我不想通过URL传递文本和其他数据

Artist.vue

<template>
    <div>
        <div>
            {{name}}
        </div>
        <div>
            {{text}}
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            name: this.$route.params.name,
            text: this.$route.params.text
            }
        }
    }
</script>

我只能在Artist.vue页面上显示艺术家姓名。

Answer 1

router.push和router-link的作用是将您重定向到新的位置/地址，例如/artists/1（它们只是在另一个位置方式，动态还是静态）。因此，原则上，该组件负责查找该地址的相关数据，而不是请求者。对于您而言，Artist.vue的责任是查找具有给定艺术家ID或艺术家路线的数据。实际上，您应该在此组件中使用某种方法从本地数据存储区中获取数据，例如使用vuex存储或仅使用普通js（将artist列表放入artist.js中，然后在Artists.vue，Artist.vue中重用）或使用ajax从服务器中使用。

使用$ router.push（）时如何在参数中传递对象？

1 个答案: