【Nuxt.js】URLののクエリパラメータを取得する方法

前回Javascriptで「？」から始まるURLのクエリパラメータを設定・取得する方法を書いたのですが、Nuxt.js(vue.js)でするにはどうすればいいのか調べたら意外と簡単だったのでメモしておきます。

vue-routerを使ってパラメータのクエリを取得

Nuxt.jsにはvue-routerがあるのでそちらの機能を使うと簡単に取得できます。

http://localhost:3000/?id=12345の場合の12345を取得したい場合
$route.query.idで取得できます。

<template>
  <section>
    <p>{{ $route.query.id }}</p>
  </section>
</template>

formのvalueに値を渡す。

これをフォームのinputタグのvalueに渡すのには

<template>
  <form action="" method="post" id="test" name="test">
    <div>
      <label>お名前</label>
      <input name="お名前" type="text">
    </div>

    <div>
      <label>メールアドレス [必須]</label>
      <input name="メールアドレス" type="text">
    </div>

    <div>
      <label>お問い合わせ [必須]</label>
    </div>

    <div>
      <input type="hidden" name="query" :value="query">
    </div>

    <button type="submit">送信</button>
  </form>
</template>

<script>
export default {
	data () {
		return {
			query: '',
		}
	},
  created() {
    this.setQuery()
  },
  methods: {
    setQuery() {
      this.query = this.$route.query.id || ''
    },
  },
}
</script>

これでinputタグに受け渡しできました。
いやあ、Nuxtって便利ですね。

※前回のながれでコンタクトフォームで書きましたが、Nuxtでのコンタクトフォームはこれでいいのか微妙なのでinputタグのvalueにクエリパラメータを渡す流れだけ捉えていただければと思います。