Wie verwende ich useQuery() als API-Routenparameter in Nuxt 3?

Question

Ich folge einer Anleitung, in der api 路由 so aufgebaut ist:

1 server/api/route.js Datei erstellen:

export default defineEventHandler((event) => {

    return {
        message: `hello api route`
    }
})

2 Verwenden Sie API-Routing in der Komponente wie folgt:

<script setup>
const { data: message } = await useFetch('/api/route')
</script>

<template>
  <div>
    <p>api data {{ message }}</p>
  </div>
</template>

Das funktioniert, aber wenn ich es versuche 1. 中添加 查询参数 :

export default defineEventHandler((event) => {

    const { name } = useQuery(event)

    return {
        message: `hello api name parameter ${name}`
    }
})

und nennen Sie es in Komponente 2.:

<script setup>
const { data: message } = await useFetch('/api/route?name=mario')
</script>

<template>
  <div>
    <p>api data {{ message }}</p>
  </div>
</template>

message 属性为空。似乎 useQuery(event) Erzeugt eine leere Variable. Irgendeine Idee, warum das nicht funktioniert?

Answer 1

尝试使用 getQuery 而不是 useQuery

export default defineEventHandler((event) => {
  const { name } = getQuery(event);
  return {
      message: `hello api name parameter ${name}`,
  };
});

Answer 2

不再支持

useQuery(event)。您可以使用getQuery(event)

getQuery 的 h3 文档