Nuxt3中如何为API路由参数正确使用useQuery()？

问题出在你的API路由代码中没有导入useQuery函数——这个函数并非Nuxt服务器路由的全局内置API，必须从h3包中手动导入才能正常使用。

修改后的API路由代码如下：

import { useQuery } from 'h3'

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

你也可以使用h3提供的getQuery函数实现同样的效果：

import { getQuery } from 'h3'

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

导入对应的函数后，useQuery/getQuery就能正确解析URL中的name参数，组件中通过useFetch获取的message也会正常显示内容。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov