[Ionic x Vue] ナビゲーションによる画面遷移を作る

IonicとVueを組み合わせたWebアプリを作りましょう。ナビゲーションによる、進む・戻るの画面遷移を作ってみました。

諏訪 悠紀

2019.06.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

今回はナビゲーションの使い方を解説します。

事前準備

こちらのブログ を通して作成したプロジェクトをベースに進めます。

ナビゲーションとは

ナビゲーションは、画面を積み重ねる（スタックする）ような遷移方法を指します。iOSアプリで言うところのNavigationControllerです。

次のような画面遷移をします。

Ionicでは、このスタック型画面遷移に加えて、ルーティングも行われます。

ナビゲーションを実装する

Home.vue に About.vue に遷移するボタンを置き、そのクリックイベントで画面遷移を行います。

Home.vue

<template>
  <ion-nav class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png" />
      <ion-button @click="onClick" full>Go to About Page</ion-button>
    </ion-content>
  </ion-nav>
</template>

<script>
export default {
  name: "home",
  methods: {
    onClick() {
      this.$router.push('/about');
    }
  }
}
</script>

About.vue は画面遷移先です。こちらはヘッダーに戻るボタンをとなる ion-back-button を使います。

About.vue

<template>
  <div class="about">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>About Page</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>This is an about page</h1>
    </ion-content>
  </div>
</template>

これで動かすと、画面遷移ができます。

ネイティブアプリのような画面遷移を作ろう

ナビゲーションはネイティブアプリで必ずと言っていいほど登場する、利用頻度の高い画面遷移手法です。

Ionicアプリでは普通のリンクを飛ばすこともできますが、よりネイティブアプリの動きに近くなるよう、ぜひ取り入れましょう。

customer-story-analytics