Question

我真的是Vue和Nuxt的新手，如果这是一个简单的问题，我深表歉意。

在对Index.vue上的数据进行API调用时，我正在动态生成路由。一个API调用足以让我检索存储在deals_array中的所有我需要的数据，因此我不需要在我的单个页面上进行另一个API调用，我只需要每个deal中的数据在deals_array中。

<ul>
  <li v-for="deal of deals_array" :key="deal.id">
    <nuxt-link :to="getSlug(deal)">{{ deal.name }}, {{deal.value}}</nuxt-link>
  </li>
</ul>

我想知道如何将整个deal对象传递到页面中，这样当我单击单个nuxt-link时，我将能够访问该交易对象及其所有属性（每页）。

我看过将params传递到nuxt-link，但我知道它仅与name属性配对，而不与path属性配对，在这里我需要{{1 }}这种情况下的网址。

我这样做可能完全错了，所以我希望方向正确。

编辑-getSlug函数

path

Answer 1

我假设您已经经历过：https://router.vuejs.org/api/。

您可以传递整个对象：

<nuxt-link :to="{ path: 'test', query: {a: 1, b: 2}}">Test Page</nuxt-link>

您的网址将变成这样：

http://localhost:3000/test?a=1&b=2

可以简单地传递整个对象。

网址查询中的$ route对象中的下一页可用。

否则，如果您不想暴露交易对象，请使用vuex的概念。将整个交易对象存储在vuex中，并将ID传递到不同的页面。然后从页面通过vuex检索交易对象。