Как передать реквизит между маршрутами в vue.js?

Question

Я хочу отправить переменную в качестве реквизита из маршрута в другой в vue.

У меня есть компонент vue Champions, использующий v-for и создающий новый компонент ChampionCard для каждого символа в файле JSON и каждый раз привязывающий текущего чемпиона.

В ChampionCard я просто показываю имя и изображение чемпиона. Я хочу, чтобы при нажатии на карту ChampionCard вы перенаправлялись на другой компонент под названием Champion с URL champions /: champion.

Но я не могу найти способ отправить данные чемпиона между этими двумя маршрутами.

Компонент чемпионов:

<div class="champions">
    <ChampionCard v-bind:champion="champion" v-for="champion in champions" :key="champion.key"> 

    </ChampionCard>
 </div>

Компонент ChampionCard:

<article @click="redirectTo(champion)" class="champion">
      <img class="champion-icon" :src="champion.image" :alt="champion.name">
      <h2 class="champion-name"> {{ champion.name }} </h2>
</article>

redirectTo(champion) {
      this.$router.push({ name: 'champion', params: { champion: champion.key }})
    }

Приведенный выше код работает, когда меня перенаправляют на champions / championName, но у меня нет доступа к моей переменной champion. Как лучше всего отправить его в качестве компонента в Champion?

Спасибо:)

Answer 1

Моя альтернатива: при перенаправлении на маршрут champions/:champion просто отправьте id из champion (например, champions/123).

Когда вы перенаправляете на этот маршрут, вы можетехранить champion объект в глобальном месте (скажем, store).Так что вы можете искать с id (123) при монтировании маршрута.
На шаг впереди, если вы не можете найти объект в глобальном хранилище, вы можете инициировать удаленный вызов.Так что ваш маршрут не будет нарушен, если 123 нет в магазине.(Пользователь может перейти непосредственно к этому маршруту, если он сохранит некоторые закладки этой страницы и т. Д.)

Чтобы сохранить ваш объект в глобальном месте, у вас есть разные альтернативы:

1. Простое управление состоянием (простая / базовая реализация)
2. Использование Vuex

Answer 2

Я думаю, что вы можете достичь того, что вы хотите, выполнив что-то вроде этого:
Объявите новый маршрут:

{
  path: '/champion/:championKey',
  name: 'Some name',
  component: ChampionComponent,
}

Затем при перенаправлении на этот новый маршрут:

redirectTo(champion) {
  this.$router.push("/champion/" + champion.key)
}

Теперь вы можете получить доступ к URL-параметру следующим образом:

this.$route.params.championKey // as declared in router.js