Help us understand the problem. What is going on with this article?

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)で元のページに戻ることができる。
miki-tea
いつも先輩方の情報に助けられている学習者です。少しでも恩返しができるよう、初学者目線で、初学者にありがちなエラーの対処法などを書いていきます。
https://miki-tea.github.io/Portfolio/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away