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

Question

我正在遵循一个指南，其中

api routes

的构建方式如下：

1 创建

server/api/route.js

文件：

export default defineEventHandler((event) => {

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

2 在组件中使用 api 路由，如下所示：

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

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

这有效，但是当我尝试在

query parameter

中添加

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)

会产生一个空变量。知道为什么这不起作用吗？

Answer 1

不再支持

useQuery(event)

。您可以使用

getQuery(event)

h3 getQuery 文档

Answer 2

尝试用

getQuery

代替

useQuery

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

Answer 3

也请查看文档：

useBody(event)

=>

readBody(event)

https://nuxt.com/docs/guide/directory-struct/server#body-handling

useQuery(event)

=>

getQuery(event)

https://nuxt.com/docs/guide/directory-struct/server#query-parameters