pageStackメソッドで、引数を設定する

したいこと

pageStackメソッドを用いて、画面遷移をしたい。
その場合、遷移先のパラメーターの指定が
vue-routerと使い勝手が違ったので自分用にメモ。

【イメージ】

↓ 「鴇色」を押下し、下記画面に遷移

前提

• Vue 3.0
• OnsenUI

結論

以下のように記述

this.pageStack.push({
    extends: コンポーネント名,
    data() {
      return {
      //渡したい値（※ここで言うと、押下したli要素の「鴇色」の情報）
        キー: 値
      };
    }
  })

これだけだと忘れてしまいそうなので（自分が）
以下に問題の全体像も記述しておきます。

問題の全体像

一覧ページのテンプレート（親コンポーネント）

■したこと

• 一覧ページのテンプレート化（類似画面が発生するため）
• $emitで一覧ページ（子コンポーネント）に値を渡す

listTemplete.vue

<template>
    <ul class="c-colorLists">
          <li v-for="(item, index) in colorLists" :key="index" @click="getItem(item)">
    </ul>
</template>
<script>
export default {
  data () {
    return {
      value: String,
    }
  },
  methods: {
   getItem (item) {
      this.value = item; //押下したリスト要素の値を取得
      this.$emit('onClick', this.value)
    }
  }
}
</script>

一覧ページ（子コンポーネント）

■したこと

• $emitで指定したonClickメソッドを用いて、pushメソッドを指定
• 渡したい値はJSONを文字列に変換
• this.pageStack.pushメソッドを使用　←★結論の内容

listPage.vue

<template>
    <color-lists :color-lists="thirdExam" @onClick="push"></color-lists>
</template>
<script>
export default {
  methods: {
      push (value) {
      let item = JSON.stringify(value); //押下したリストの値を文字列に変換
      this.pageStack.push({
        extends: thirdColorDetail,
        data() {
          return {
            colorItem: item //渡したい値
          };
        }
      })
    }
  }
}
</script>

詳細ページ

■したこと

• dataプロパティで、listPage.vueから渡される「item」を受け取る（※””を指定しているが、moutedで上書きされる箇所）
• mountedメソッドで、受け取った「colorItem」をJSONに変換

detailPage.vue

<template>
        <div class="descBlock">
          <h2>{{item.title}}</h2>
          <p>
            {{item.subTitle}}
          </p>
          <p class="desc">
            {{item.description}}
          </p>
        </div>
</template>
<script>
  data(){
    return {
      item: "",
    }
  },
  mounted(){
      this.item = JSON.parse(this.colorItem); //押下したリストの値を、JSONに変換
  }
  </script>