Как использовать параметры запроса URL в Nuxt 3

Это продолжение моего предыдущего поста о том, как установить параметры запроса в Nuxt 3. Мы продолжим работу с кодом, написанным там, поэтому обязательно ознакомьтесь с ним.

Проблема, которую мы решаем

Мы остановились на том, что наш URL выглядит как localhost:3000/test?streamer=faker. Это хорошо, но содержит несколько случаев, которые далеко не идеальны.

Поскольку параметр URL обновляется с использованием v-модели нашего ввода, при обновлении страницы мы теряем это локальное состояние и значение, хранящееся в twitchStreamer.

Использование useRoute в Nuxt

Nuxt.js полагается на vue-router для большей части своей логики маршрутизации.

В нашем примере мы используем Composition API, одну из новых функций, встроенных в Nuxt 3.

Чтобы получить наш маршрут, мы используем приведение useRoute() в наш setup(). Nuxt 3 автоматически импортирует useRoute(), поэтому мы можем выбрать явный или неявный.

setup() {
  const route = useRoute()
}

Наличие нашего маршрута открывает все преимущества vue-router, включая доступ к нашим параметрам запроса!

Сохранение параметра запроса

Имея доступ к нашему маршруту, мы можем проверить переменную запроса (что после знака = в streamer=), используя route.query.streamer.

Легкий!

Теперь я использую эту логику вместе с тернарным оператором с переменной twitchStreamer.

const twitchStreamer = ref(route.query.streamer ? route.query.streamer : '')

Теперь каждый раз, когда страница переходит или обновляется, наш twitchStreamer будет проверять, есть ли у нашего route параметр запроса стримера.

Если это так, наш twitchStreamer будет содержать значение параметра. В противном случае это будет пустая строка.

Окончательный фрагмент кода

<!-- pages/example.vue -->
<template>
  <input v-model="twitchStreamer" />
</template>

<script>
  setup() {
    const route = useRoute()
    const router = useRouter()
    const twitchStreamer = ref(route.query.streamer ? route.query.streamer : '')

    watch(twitchStreamer, (twitchStreamer, previous) => {
      router.push({
        path: '/test',
        query: { streamer: twitchStreamer },
      })
    })

    return { twitchStreamer }
</script>

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.