Nuxt.jsで、遷移する際にデータを送受信する方法

Nuxt.jsで Vue Routerを利用してPage遷移をする際に、データを送受信する方法を解説します。

parmas、query を使ったそれぞれのパターンです。

①：params を使ったPage遷移 with data

paramsを利用する = URLにデータを入れ込みます。
あるあるパターンが、http:://domain/user/{id} みたいなケースでしょうか。

①-1：送信側

<template>
  <div>
      <p @click="showUserDetail">
        {{ユーザー詳細ページへ}}
      </p>
   <div>
</template>

<script>
export default {
  methods: {
    showUserDetail() {

      this.$router.push({
        name: "User-id",
        params: {
          id: id,
        },
      });
    }
  }
}
</script>

①-2：受信側

<template>
  <div>
      <p>
        {{this.$route.params}} // paramsの中に含まれる
      </p>
  </div>
</template>

<script>
</script>

②：query を使ったPage遷移 with data

②-1：送信側

<template>
  <div>
      <p @click="showUserDetail">
        {{ユーザー詳細ページへ}}
      </p>
   <div>
</template>

<script>
export default {
  data () {
    return {
      userName: 'tanaka',
      userAge: 30,
    }
  },
  methods: {
    showUserDetail() {

      this.$router.push({
        name: "User-id",
        params: {
          id: id,
        },
        query: {
          name: this.userName,
          age: this.userAge,
        }
      });
    }
  }
}
</script>

②-2：受信側

<template>
  <div>
      <p>
        {{this.$route.query}} // queryの中に含まれる
      </p>
  </div>
</template>

<script>
</script>