Как передать объект в параметрах при использовании $ router.pu sh ()? - PullRequest
Новая
       5

Как передать объект в параметрах при использовании $ router.pu sh ()?

0 голосов
/ 05 января 2020

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

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

Я не сделал t <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 стр.

1 Ответ

1 голос
/ 06 января 2020

router.push и router-link предназначены для того же, чтобы перенаправить вас на новое место / адрес, например, /artists/1 (они просто делают это по-другому, динамически и статически) , Таким образом, в принципе, этот компонент отвечает за поиск соответствующих данных для этого адреса, а не запрашивающий. В вашем случае Artist.vue отвечает за поиск данных с указанным идентификатором исполнителя или маршрутом исполнителя. В действительности у вас должен быть какой-то метод в этом компоненте для извлечения данных из локального хранилища данных, например, с помощью хранилища vuex или просто простого js (поместите список artist в artist.js и повторно используйте его в обоих Artists.vue, Artist.vue) или с сервера, использующего ajax.

...