我想进入新页面查看Nuxt js中api的描述

Question

我正在 Nuxt js 中编写代码，并且我有来自 API 的新闻作为卡片，如果我单击卡片，我想转到一个新页面，其中包含来自 api 的完整描述。我怎样才能用Nuxt js做到这一点？

谢谢！

我有带有 api 数据的卡片。

Answer 1

您可以为此页面创建“完整描述”组件，以便您从 API 访问完整描述。 并创建另一个组件（New.vue）。 在此显示卡片的页面中，您可以使用 v-for 循环迭代卡片数据，并为每张卡片创建一个可单击的链接，以导航到完整的描述页面。 以下是 News.vue 组件外观的基本示例：

<template>
  <div>
    <div v-for="card in cards" :key="card.id">
      <div @click="goToFullDescription(card.id)">
        <!-- Display card data here (e.g., card.title, card.image, etc.) -->
        <h2>{{ card.title }}</h2>
        <img :src="card.image" alt="Card Image" />
        <!-- Other card content -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [] // Your card data from the API
    };
  },
  methods: {
    goToFullDescription(cardId) {
      // Use Nuxt's programmatic navigation to go to the full description page
      this.$router.push(`/full-description/${cardId}`);
    }
  }
};
</script>

在 FullDescription.vue 组件中，您可以根据路由中的 cardId 参数从 API 检索完整描述。您可以使用Nuxt的asyncData或fetch方法根据cardId获取描述数据并将其显示在页面上。 以下是 FullDescription.vue 组件外观的基本示例：

<template>
  <div>
    <!-- Display the full description data here -->
    <h1>{{ fullDescription.title }}</h1>
    <p>{{ fullDescription.description }}</p>
    <!-- Other full description content -->
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    // Fetch the full description data based on params.cardId
    const cardId = params.cardId;
    // Fetch data from your API using axios or a similar library
    const response = await axios.get(`/api/cards/${cardId}`);

    return {
      fullDescription: response.data // Full description data
    };
  }
};
</script>