Nuxt.js で /hoge?q=fuga みたいなリンクのurlのクエリを取得するメモ

遷移してきたときは created か mountedで
同じ画面でリンク踏んでqueryを変更する場合は beforeRouteUpdate で

export default {
  data () {
    return {
      query: '',
    }
  },
  created() {
    this.setQuery()
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.setQuery()
  },
  methods: {
    setQuery() {
      this.query = this.$route.query.q || ''
    },
  },
}

こんな感じ

ちなみにリンクの書き方はこんな感じ <nuxt-link :to="{path: '/hoge', query: {q: 'くえり'}}">くえり</nuxt-link>

参考

• ナビゲーションガード | Vue Router