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

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

05.01.2020 09:39:49 Просмотров 75 Источник

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

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

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59603044/how-can-i-pass-an-object-in-params-when-using-router-push#comment105370599_59603044
Один файл не может иметь 2 корня элементы. кстати, заверните обоих этих дивов в див.

Ответы - Как я могу передать объект в параметрах при использовании $маршрутизатора.push ()? / How can I pass an object in params when using $router.push()?

Является ответом!
lenglei

06.01.2020 12:09:22

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

https://stackoverflow.com/questions/59603044/how-can-i-pass-an-object-in-params-when-using-router-push/59604213#comment105394572_59604213
Я думал об использовании vuex, но я не использовал его раньше, поэтому я надеялся, что мне удастся решить эту проблему только с помощью vue router. Это должно быть решение, спасибо!
Закрыть X