Onsen UI+Vueでpop時に遷移先のページの関数を実行する方法

Question

前提・実現したいこと

お世話になります。vue2とOnsenUIを使ってモバイルアプリを作成しています。

v-ons-navigatorを使ってメインページから設定ページに遷移した後、設定ページからメインページに戻った後にメインページ側で設定を適用したいと思ったのですが、実現できる方法が見つからず悩んでいます。

具体的に、設定ページから戻る際にメインページの関数を呼び出すか、メインページのイベントを発火させるかしたいのですが、方法をご存知の方がいらっしゃいましたら教えていただけると助かります。

該当のソースコード

OnsenUIのドキュメントからコードをお借りしてきました。

以下のコードで、page2からpage1に遷移する際（postpopイベントが発火した際）にpage1の関数を呼び出したいと思っています。

index.html

<template id="main">
  <v-ons-navigator swipeable
    :page-stack="pageStack"
    @push-page="pageStack.push($event)"
    @postpop="testFunction"
  ></v-ons-navigator>
</template>

<template id="page1">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Page 1</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      This is the first page {{ showText }}
      <v-ons-button @click="push">Push Page 2</v-ons-button>
    </p>
  </v-ons-page>
</template>

<template id="page2">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>Page 1</v-ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </v-ons-toolbar>
    <p style="text-align: center">This is the second page</p>
  </v-ons-page>
</template>

<div id="app"></div>

main.js

var page2 = {
  key: 'page2',
  template: '#page2'
}

var page1 = {
  key: 'page1',
  template: '#page1',
  methods: {
    push () {
      this.$emit('push-page', page2)
    },
    changeValue () {
      this.showText = 'AAA'
    }
  },
  data () {
    return {
      showText: 'Not changed'
    }
  }
}

new Vue({
  el: '#app',
  template: '#main',
  methods: {
    testFunction () {
      // ここでpage1のchangeValue関数を実行したい
    }
  },
  data () {
    return {
      pageStack: [page1]
    }
  }
})

試したこと

vueのデバッグツールを使うと、pageStackにはページがAnonymous Componentとして登録されているようです。

何とかしてpage1のコンポーネントをpostpopの際に取得しようといろいろ試しましたが、できませんでした。

postpopイベントで渡される引数にもpage1のコンポーネントが含まれていないようで、どうして良いか分からずお手上げ状態です。

お知恵をお貸しいただけると助かります。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

• onsenui: 2.9.1
• vue: 2.5.0
• vue-onsenui: 2.5.0

Answer 1

自己解決しました。というか、よく見たらv-ons-navigatorのドキュメントに書いてありました・・・お騒がせしました。

解決策としては、page1でpush-pageを実行する際に

      this.$emit('push-page', {
        extends: page2,
        onsNavigatorProps: {
          changeSettings: this.loadFilterSettings
        }
      })

でpage1の関数を渡しました。

その後、page2のv-ons-back-buttonのクリック時に渡された関数を実行するコードをこのように記述しました。

<v-ons-back-button @click="changeSettings">戻る</v-ons-back-button>

これでスマホの方でも問題なく動きました。