[Vue + OnsenUI] v-ons-navigatorでページ遷移する

概要

Vue2.4.4及びOnsenUIのVue2向けモジュールであるvue-onsenui2.2.1のv-ons-navigatorを用いた画面遷移を実装を行う。サンプルは以下のgifの通り。

※ 撮影の都合でgifがカクついてますが、実際はもっとヌルヌル切り替わります

前提

以下の環境で動作確認済み

debian 9.2
vue 2.4.4
vue-onsenui 2.2.1

ナビゲーション用コンポーネントの実装

まずは、v-ons-navigatorを用いたナビゲーション画面全体を制御するコンポーネントを作成する。

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

<script>
  import test1 from './test1'
  export default {
    data() {
      return {
        pageStack: [test1]
      }
    }
  }
</script>

v-ons-navigatorのpage-stack属性には、名の通り積み上げているページのコンポーネントをバインドする。
例えばトップ画面を開いている時は[トップ画面],トップ画面から設定画面に遷移した状態であれば[トップ画面,設定画面]と配列に積まれた状態になるようにする。

今回は、test1ページを最初に表示しておきたいので

data() {
  return {
    pageStack: [test1]
  }
}

のように、test1を初期値として積んでおく。

@push-page="pageStack.push($event)"

ページを積む処理はイベントで定義して置いて、これを表示中の子コンポーネントから呼び出すことで画面遷移を実現する。

1ページ目を作成

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">test1</div>
    </v-ons-toolbar>
    <div>テストページ1</div>
    <v-ons-button @click="push">テストページ2へ</v-ons-button>
  </v-ons-page>
</template>

<script>
  import test2 from './test2.vue'
  export default {
    methods: {
      push() {
        this.$emit('push-page', test2)
      }
    }
  }
</script>

1ページめには、2枚目のページへの移動手段を用意する。移動するためのボタンがクリックされた際に、以下のように親コンポーネントのpush-pageイベントを発火し、2ページ目であるtest2をスタックに追加する。そうすることで、画面は自動的にスタックの先頭であるtest2を表示するようになる。

this.$emit('push-page', test2)

2ページ目の実装

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>戻る</v-ons-back-button>
      </div>
      <div class="center">test2</div>
    </v-ons-toolbar>
    <div>テストページ2</div>
  </v-ons-page>
</template>

<script>
</script>

2ページ目には、1ページ目に戻るための仕組みを実装する。といっても、手動でStackからページを取り除く必要はなく、上記コードのようにv-ons-back-button
を設置することでその辺りを自動でやってくれる。v-ons-back-button以外をトリガに戻りたい場合はスタックを直接弄る必要がありそう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です