Как я могу передать объект в параметрах при использовании $маршрутизатора.push ()?

Я хочу пройтись по массиву объектов, и когда я нажимаю на элемент, я хочу отобразить страницу, заполненную данными из другого компонента.

Вот мой маршрутизатор.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 страницы.