Nuxt.jsのクエリパラメータの使い方覚書

ソースコード全文

遷移元

hello.vue

<template>
  <div>
    <p>名前：</p>
    <input type="text" v-model="name" />
    <p>入力値：{{name}}</p>
    <hr />
    <p>血液型：</p>
    <input type="text" v-model="blood_type" />
    <p>入力値：{{blood_type}}</p>

    <button @click="jumpPage">飛ぶ</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      blood_type: ""
    };
  },
  methods: {
    jumpPage() {
      this.$router.push({
        path: "bye",
        query: { name: this.name, blood_type: this.blood_type }
      });
    }
  }
};
</script>

遷移先

bye.js

<template>
  <div>
    <button @click="back">戻る</button>
    <button @click="result">渡ってきたクエリ</button>
    <p>名前：{{this.name}}</p>
    <p>血液型：{{this.blood_type}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      blood_type: ""
    };
  },
  methods: {
    back() {
      this.$router.go(-1); //画面遷移後、元の画面に戻る
    },
    result() {
      this.name = this.$route.query.name; //渡ってきたクエリパラメータをローカルなデータ代入
      this.blood_type = this.$route.query.blood_type;
    }
  }
};
</script>

point

1. 遷移元：this.$router.pushでページ遷移
2. 遷移先：this.$route.query.hogehogeでクエリパラメータ?hogehoge=~~で渡ってきた~~のところを取得（ちなみに遷移先のパラメータ全文はhttp://localhost:3000/bye?name=aaaa&blood_type=A）
3. 遷移先this.$router.go(-1)で元のページに戻ることができる。