📘

Nuxt3でURLクエリの変更をwatchで監視する

2023/07/29に公開

Nuxt3でURLクエリの変更をwatchで監視しようと思い、以下のように書いてみましたが、URLクエリが変更されても、watchは機能しませんでした。

<script lang="ts" setup>
const route = useRoute()

watch(
  route,
  () => {
    console.log(route['query'])
  }
)
</script>

そこで、以下の記事を参考にさせていただきました。

https://qiita.com/YumaInaura/items/9c86ed91d56402e816db

以下のような記述に変更することで、URLクエリに合わせて、watchが機能しました。

<script lang="ts" setup>
const route = useRoute()

watch(
  () => route.query,
  () => {
    console.log(route['query'])
  }
)
</script>

色々とわかっていない点が多いですが、他の方の参考になりましたら幸いです。

Discussion