전회 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의 값에 값을 전달합니다.

이것을 양식의 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에 쿼리 파라미터를 건네주는 흐름만 파악해 주시면 좋겠습니다.