Nuxt 3에서 URL 쿼리 매개변수 사용하기

This is a continuation of my previous post on how to set query parameters in Nuxt 3. We'll be continuing with the code written there so make sure you check it out.

우리가 해결하고 있는 문제

localhost:3000/test?streamer=faker 처럼 보이는 URL을 남겨두었습니다. 이것은 훌륭하지만 이상적이지 않은 몇 가지 사례가 포함되어 있습니다.

URL 매개변수가 입력의 v-모델을 사용하여 업데이트되고 있기 때문에 페이지를 새로 고치면 해당 로컬 상태와 twitchStreamer 에 저장된 값이 손실됩니다.

Nuxt에서 useRoute 사용하기

NuxtJS는 라우팅 로직의 대부분을 vue-router에 의존합니다.

이 예에서는 Nuxt 3에 내장된 새로운 기능 중 하나인 Composition API를 사용하고 있습니다.

우리의 경로를 얻기 위해 우리는 useRoute()를 우리의 setup()에 사용합니다. Nuxt 3 자동 가져오기useRoute()를 통해 명시적 또는 암시적을 선택할 수 있습니다.

setup() {
  const route = useRoute()
}

경로가 있으면 쿼리 매개변수에 대한 액세스를 포함하여 vue-router 의 모든 이점이 잠금 해제됩니다!

쿼리 매개변수 유지

경로에 액세스하면 streamer= 를 사용하여 쿼리 변수( = in route.query.streamer 뒤에 있는 것)를 확인할 수 있습니다.

쉬운!

이제 twitchStreamer 변수가 있는 ternary operator과 함께 이 논리를 사용합니다.

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>