0

我正在尝试创建一个简单的 Nuxt 3 应用程序用于学习目的，它使用动态路由在页面加载时从 API 加载数据。我想弄清楚的是如何使用路由id参数和组合 API 来调用外部 API 并使数据在组件中可用。

所以这是我的基本文件夹结构：

/pages
   \
   index.vue
   /currency
        \
        [id].vue

索引.vue：

<template>
  <main>
    <h1>Index Page</h1>

    <table border="1 px solid">
      <thead>
      <tr>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>Details</th>
      </tr>
      <tr v-for="currency in data.data" :key="data.id">
        <td>{{ currency.name }}</td>
        <td>{{ currency.symbol }}</td>
        <td>{{ currency.price_usd }}</td>
        <td>
          <NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>
        </td>
      </tr>
      </thead>
    </table>
  </main>
</template>

<script>
export default {
  async setup() {
    const {data} = await useFetch('/api/coinlore/tickers');

    return {
      data
    };
  }
}
</script>

这就是我想要的[id].vue

<template>
  <main>
    <h1>{{ data.data.name }} Detail page</h1>
    {{ $route.params.id }}
  </main>
</template>

<script>
export default {
  async setup() {
    const {data} = await useFetch('/api/coinlore/ticker?id=90');

    console.log(data);

    return {
      data
    };
  }
}
</script>

从这篇博客文章开始，我尝试了这个

<template>
  <main>
    <h1>{{ data.name }} Detail page</h1>
    {{ $route.params.id }}
  </main>
</template>

<script>
export default {
  async setup() {
    const coin = reactive({});
    function fetchCoin(id) {
       const {data} = await useFetch('/api/coinlore/ticker?id=' + $route.params.id);
       coin = data;
    }

    watch('$route.params.id', fetchCoin)

    return {
      coin
    };
  }
}
</script>

但那里也没有骰子。

我怎样才能简单地 1）进行 API 调用和 2）使用组件中的id参数填充数据[id].vue？

4

1 回答 1

0

使用useRoute()钩子：

import { useRoute } from 'vue-router';

export default {
  setup() {          
    const route = useRoute();                                       
    const { data: coin } = await useFetch('/api/coinlore/ticker?id=' + route.params.id);

    return { coin }
  }
}

演示

于 2022-03-02T05:31:13.000 回答