Question

我想将变量作为道具从路线发送到其他人。

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

在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>

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变量。将其作为道具中的道具发送的最佳方式是什么？

谢谢：）

Answer 1

我的替代方法是：在重定向到champions/:champion路由时，只需发送id中的champion（例如champions/123）。

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

要将对象保留在全局位置，您可以使用其他选择：

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

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

2 个答案: