在 Nuxt 3 动态组件中根据路由参数进行 API 调用

Question

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

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

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

index.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>

从这个出发 blog post 我试过这个

<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].vue 组件中的 id 参数填充数据？

Answer 1

使用useRoute() hook:

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

demo

Answer 2

也许会有帮助:_)

在index.vue中最好使用编程路由：

<NuxtLink :to="{path: '/currency', params : {id: currency.id} }">{{ currency.id }}</NuxtLink>
// it will build link: `/currency/[id]`

正如 Tony19 所言，需要在组件中定义 route（useRoute 挂钩）：

// import in script
import { useRoute } from 'vue-router';

// define route from 'vue'
const route = useRoute()
    
// read ID from route params
const currencyId = route.params.id
    
// actually it's better use literal string for using dynamic data => better reading
const { data: coin } = await useFetch(`/api/coinlore/ticker?id=${currencyId}`);

在 Nuxt 3 动态组件中根据路由参数进行 API 调用

Make API call based on route parameter in Nuxt 3 dynamic compopnent

watch

vue.js

nuxt.js

nuxtjs3