Monaca Navigator を使用して画面遷移をしてみよう Onsen UI＋Vue - 中年システムエンジニアのオモチャ箱

前回までは、Splitter や Tabbar を使用して画面遷移を行いました。
下記の記事で取り上げています。

www.ma-se.com

今回は Navigator を使用して画面遷移をしてみましょう！
プロジェクトは、新規プロジェクトを作成するところから始めてください。
忘れてしまった方は、下記の記事を参考にしてみてくださいね。

www.ma-se.com

新規プロジェクトの作成では、下記を選択・入力してください。

フレームワーク
「Vue」を選択します。
テンプレート
「Onsen UI V2 VUE Navigation」を選択します。
プロジェクトの情報
プロジェクト名には「Onsen UI テスト03」を入力します。
説明は任意で構いません。

上記でプロジェクトを新規で作成すると、クラウド IDE には下記のように表示されたかと思います。

f:id:middle-aged-se:20190623135914j:plain

Navigator 機能について

Navigator 機能を使用することにより、各画面に遷移することができます。
遷移先では、戻るボタン等を配置するだけで、簡単に遷移元画面に戻ることができます。
尚、遷移元画面に戻る際は、複雑な制御を記述する必要はなく、Navigator 機能で簡潔に実現できます。

今回作成した動作で説明します。
Page 1 画面の、Push Page 2 ボタンを押下します。

f:id:middle-aged-se:20190623135919j:plain

すると、Page 2 に画面が遷移します。
Page 2 画面のツールバーに表示されている、＜Page 1 リンクをクリックすると、Page 1 画面に戻ります。

f:id:middle-aged-se:20190623135923j:plain

文字列を修正してみよう

英語表記されたものを、日本語表記に変更します。

修正対象は Page1.vue ファイルになります。
Page 1 画面のツールバー、コンテンツ内容、ボタン表示名称を変更します。
ツールバーを変更するため、Page1.vue ファイルの 3 行目を変更します。

変更前ソース
<custom-toolbar>Page 1</custom-toolbar>

変更後ソース
<custom-toolbar>メイン画面</custom-toolbar>

コンテンツ内容を変更するため、Page1.vue ファイルの 4、5 行目を変更します。

変更前ソース


This is the first page

変更後ソース


メイン画面に表示するコンテンツです

ボタン表示名称を変更するため、App.vue ファイルの 6 行目を変更します。

変更前ソース
<v-ons-button @click="push">Push Page 2</v-ons-button>

変更後ソース
<v-ons-button @click="push">詳細画面へ</v-ons-button>
Page 2 画面のツールバー、コンテンツ内容、遷移元画面に戻る際のリンク名称を変更します。
ツールバー名称、及び、遷移元画面に戻る際のリンク名称を変更するため、Page2.vue ファイルの 3 行目を変更します。

変更前ソース
<custom-toolbar :back-label="'Page 1'">Page 2</custom-toolbar>

変更後ソース
<custom-toolbar :back-label="'メイン画面へ'">詳細画面</custom-toolbar>

コンテンツ内容を変更するため、Page2.vue ファイルの 4 行目を変更します。

変更前ソース
This is the second page

変更後ソース
詳細画面に表示するコンテンツです
ファイルを保存して、プレビュー画面を確認してください。
どうでしょう？　文字列は変更されて表示されたでしょうか？