如何在 vue.js 中的路由之间传递道具？

Question

我想在 vue 中将一个变量作为 prop 从一个路由发送到另一个路由。

我有一个 vue 组件 Champions，使用 v-for 并为 JSON 文件中的每个角色创建一个名为 ChampionCard 的新组件，并且每次都绑定当前的冠军。

在 ChampionCard 中，我只显示冠军的名字和形象。 我希望，当您点击 ChampionCard 时，您会被重定向到另一个名为 Champion 的组件，其 URL 为 Champions/:champion。

但我找不到在这 2 条路线之间发送冠军数据的方法。

冠军组件：

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

    </ChampionCard>
 </div>

冠军卡组件：

<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 路由时，只需发送champion 的id（例如champions/123）。

当您重定向到此路由时，您可以将champion 对象存储在全局位置（例如store）。这样您就可以在安装路线时使用 id (123) 进行查找。
更进一步，如果在全局存储中找不到对象，可以发起远程调用。这样如果123 不在商店中，您的路线就不会中断。 （如果用户保存了该页面的一些书签等，用户可以直接转到该路线。）

要将您的对象保持在全局位置，您有不同的选择：

1. Simple State Management（简单/基本实现）
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