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

Question

我想将变量作为道具从路由发送到 vue 中的另一个。

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

在 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路线时，只需发送champion的id （例如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