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

4959 ワード
vue-router Vue.js nuxt.js Vue.js テキストリンク

前回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にクエリパラメータを渡す流れだけ捉えていただければと思います。