Как использовать useQuery() для параметров маршрута API в Nuxt 3?

Я следую руководству, в котором 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) создает пустую переменную. Любая идея, почему это не работает?

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
3
0
929
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте getQuery вместо useQuery

export default defineEventHandler((event) => {
  const { name } = getQuery(event);
  return {
      message: `hello api name parameter ${name}`,
  };
});
Ответ принят как подходящий

useQuery(event) больше не поддерживается. Вы можете использовать getQuery(event)

Документы h3 для getQuery

Другие вопросы по теме