Как я могу передать объект в параметрах при использовании $маршрутизатора.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
страницы.

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

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