如何在Nuxt 3中使用useQuery()处理API路由参数？

Question

我正在遵循一个指南，其中api路由是这样构建的：

1.创建 server/api/route.js 文件：

export default defineEventHandler((event) => {

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

在组件中使用 API 路由的方法如下：

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

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

这个方法是可行的，但是当我尝试在1.中添加一个查询参数时出现了问题:

export default defineEventHandler((event) => {

    const { name } = useQuery(event)

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

将其命名并在组件 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)生成了一个空变量。有什么想法为什么不起作用？

- Artur Müller Romanov

Answer 1

useQuery(event) 不再被支持。你可以使用 getQuery(event)

h3 的 getQuery 文档

- nur_riyad

---

useBody(event)也不再受支持。替代方法是readBody(event)。 - undefined

Answer 2

尝试使用getQuery而不是useQuery

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

- Tristan