Vue.js 使用$router.push（）时，如何在params中传递对象？

我想在一个对象数组中循环，当我单击一个项目时，我想显示一个页面，其中填充了来自另一个组件的数据

这是我的路由器.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

只有

和一个过渡动画，所以我认为这并不重要

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>

<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

页面中显示艺术家的姓名。

router.push

和

router link

的作用是将您重定向到一个新的位置/地址，例如，

/artists/1

（它们只是以不同的方式，动态地与静态地进行）。因此，原则上，该组件负责查找该地址的相关数据，而不是请求者。在您的情况下，

Artist.vue

负责查找具有给定艺术家Id或艺术家路线的数据。实际上，您应该在这个组件中有一些方法，可以从本地数据存储中获取数据，例如使用vuex存储或纯js（将

artist

列表放入

artist.js

中，并在

artist.vue

，

artist.vue

）或使用ajax从服务器中获取数据

单个文件组件不能有2个根元素。顺便说一句，将这两个div都包装在一个div中。我曾考虑过使用vuex，但我以前没有使用过它，所以我希望我能够通过使用vue路由器来解决这个问题。这一定是解决方案，谢谢！