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

2024-04-17

我正在遵循一个指南,其中api routes是这样构建的:

1 创建server/api/route.js file:

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

the message财产是空的。看起来useQuery(event)产生一个空变量。知道为什么这不起作用吗?


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

getQuery 的 h3 文档 https://www.jsdocs.io/package/h3#getQuery

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Nuxt 3 中使用 useQuery() 作为 API 路由参数? 的相关文章

  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • JavaScript 中的“new”关键字是什么?

    The newJavaScript 中的关键字第一次遇到时可能会很混乱 因为人们倾向于认为 JavaScript 不是面向对象的编程语言 它是什么 它解决什么问题 什么时候合适 什么时候不合适 它做了 5 件事 它创建一个新对象 这个对象的
  • 使用 npm 作为构建工具连接文件

    我最近发现我可以使用 npm 作为任务运行程序 而不是 gulp 或 grunt 到目前为止 一切都很棒 lint stylus jade uglify watch 等 但串联部分 我似乎无法实现 gulp 是这样的 gulp task s
  • jQuery UI sortable 和 contenteditable=true 不能一起工作

    我正在创建一个列表并希望使其项目可排序和可编辑 所以我这样做 ul li span A span li li span B span li li span C span li ul ul list sortable http jsfiddl
  • 有没有办法监控页面上运行的 JavaScript 函数?

    有没有办法查看页面上正在执行哪些功能 如果我在页面上加载外部脚本 是否可以动态更改函数的功能或阻止其运行 HTML5 http www w3 org TR html5 scripting 1 html establish script bl
  • Streamjs和linqjs有什么关系

    读完SICP后 我最近发现streamjs https github com dionyziz stream js 开发商参考linqjs http linqjs codeplex com 作为具有不同语法的替代实现 但我无法建立连接 St
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 卸载/销毁 Angular 延迟加载组件

    我的设置与此处找到的帖子类似http ify io lazy loading in angularjs http ify io lazy loading in angularjs 处理 Angular 中我的应用程序的各种组件的延迟加载 我
  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 浏览器默认区域设置 - Intl.DateTimeFormat 与 navigator.language

    在对网站进行编码并格式化日期时 我想使用用户在浏览器中设置的区域设置 例如 如果用户定制了他们的chrome settings languages在 Chrome 中设置为非默认值 这就是我想要使用的值 但是 当我在此类浏览器的控制台中运行
  • (0, eval) () 的作用是什么? [复制]

    这个问题在这里已经有答案了 以下内容来自这个问题 https stackoverflow com questions 14119988 return this 0 evalthis 14120023 14120023 function q
  • 如何使用 Jest 测试对象键和值的相等性?

    我有一个mapModule我在其中导入组件并导出它们 import ComponentName from components ComponentName export default name ComponentName 我该如何测试ma
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • 在 JSP 或 Javascript 中清除浏览器缓存中的图像

    我正在为一所大学开发JSP Web 应用程序 用户页面中显示人员图片 用户注销后如何从网络浏览器缓存中清除这张图片 使用 JSP 或 JavaScript 那是不可能的 最好的选择是完全禁用相关资源的缓存 创建一个filter https
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐