vue(nuxt.js)にて、異なるページ間でオブジェクト変数のデータを移動させたい

実現したいこと

Webアプリを作成しているのですが、vue(nuxt.js)を使用したときのページ間でのデータ移動方法について質問があります。
具体的には、「/pages/index.vue」にある２つのボタン("adam", "eva")の内どちらかをクリックすると、「/pages/result.vue」に遷移し、各ボタンに対応する人名と年齢情報が「/pages/result.vue」に表示されるようにしたいです。

ネット上で調べてみるとpropsを使用すると良いとありましたが、どうにもよくわかりませんでした。
また、URLをきれいにしたいので、GETメソッドの利用以外の方法をご教示いただけますと幸いです。。

2つのファイルのソースコードは以下の通りです。

/pages/index.vue

vue
1<template>
2  <div>
3    <v-row>
4      <v-col>
5        <v-row class="my-6" v-for="person in persons" :key="person.name">
6          <v-btn to="result" nuxt>{{ person.name }}</v-btn>
7        </v-row>
8      </v-col>
9    </v-row>
10  </div>
11</template>
12
13<script>
14export default {
15  data() {
16    return {
17      persons: [
18        {
19          name: "adam",
20          age: "18",
21        },
22        {
23          name: "eva",
24          age: "16",
25        },
26      ],
27    };
28  },
29};
30</script>

/pages/result.vue

vue
1<template>
2  <div>
3    <v-row>
4      <v-col>
5        <h1>name</h1> <!--ここに取得したname-->
6        <h1>age</h1>  <!--ここに取得したage-->
7      </v-col>
8    </v-row>
9  </div>
10</template>
11
12
13<script>
14export default {
15  //ここの処理で、index.vueにて押されたボタンニ対応するperson.nameとperson.ageを取得したい
16};
17</script>

Ryota_Fukumoto

2020/12/02 15:34

URLをきれいにしたいというのは、以下のようにURLにクエリストリングを含めたくないということでしょうか？ /result?name=adam&age=16

行動規範の内容に同意します

回答1件

回答

以下のような感じで、ローカルストレージに保存するのはどうでしょうか。

index.vue

vue
1<template>
2  <div class="container">
3    <button
4      type="button"
5      v-for="person in persons"
6      :key="person.name"
7      @click="save(person.name, person.age)"
8    >
9      {{ person.name }}
10    </button>
11  </div>
12</template>
13
14<script>
15export default {
16  data() {
17    return {
18      persons: [
19        {
20          name: "adam",
21          age: "18",
22        },
23        {
24          name: "eva",
25          age: "16",
26        },
27      ],
28    };
29  },
30  methods: {
31    save(name, age) {
32      window.localStorage.setItem("name", name)
33      window.localStorage.setItem("age", age)
34      this.$router.push("/result")
35    },
36  }
37};
38</script>
39
40<style scoped>
41.container {
42  display: flex;
43  height: 100vh;
44  align-items: center;
45  justify-content: center;
46}
47.container > button {
48  display: block;
49  margin: 0 30px;
50}
51</style>

result.vue

vue
1<template>
2  <div class="container">
3    <h1>{{ name }}</h1>
4    <h1>{{ age }}</h1>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11    return {
12      name: '',
13      age: '',
14    };
15  },
16  mounted() {
17    this.name = window.localStorage.getItem("name")
18    this.age = window.localStorage.getItem("age")
19  }
20};
21</script>
22
23<style scoped>
24.container {
25  display: flex;
26  height: 100vh;
27  align-items: center;
28  justify-content: center;
29}
30</style>