ユーティリティ関数

Ionic Vueには、アプリケーションで使用できるいくつかのユーティリティ関数が付属しており、画面上のキーボードやハードウェアの戻るボタンの管理など、特定のタスクを容易にします。

ルータ

関数

useIonRouter

▸ useIonRouter(): UseIonRouterResult

ナビゲーション、ページ遷移のカスタマイズ、ネイティブ機能のルーティングコンテキストのためのAPIメソッドを含む、Ionicルータインスタンスを返します。この関数は、VueのuseRouterと組み合わせて使用できます。

ページ遷移のカスタマイズ

import { IonPage, useIonRouter } from '@ionic/vue';
import { defineComponent } from 'vue';
import { customAnimation } from '@/animations/customAnimation';

export default defineComponent({
  components: { IonPage },
  setup() {
    const router = useIonRouter();
    const push = () => {
      router.push('/page2', customAnimation);
    };
    const back = () => {
      router.back(customAnimation);
    };

    return { push, back };
  },
});

Androidのハードウェアバックボタン

ユーザーがAndroidのハードウェアバックボタンを押したときに、アプリケーションのルートページにいるかどうかを知りたい場合があります。

import { useIonRouter } from '@ionic/vue';

...

export default {
  setup() {
    const ionRouter = useIonRouter();
    if (ionRouter.canGoBack()) {
      // Perform some action here
    }
  }
}

Vueルーティングの追加APIについては、Vue Routerドキュメントを参照してください。

インターフェース

UseIonRouterResult

import { AnimationBuilder } from '@ionic/vue';
import { RouteLocationRaw } from 'vue-router';

interface UseIonRouterResult {
  canGoBack: (deep?: number) => boolean;
  push: (location: RouteLocationRaw, routerAnimation?: AnimationBuilder) => void;
  replace: (location: RouteLocationRaw, routerAnimation?: AnimationBuilder) => void;
  back: (routerAnimation?: AnimationBuilder) => void;
  forward: (routerAnimation?: AnimationBuilder) => void;
  navigate: (
    location: string | Location,
    routerDirection?: 'forward' | 'back' | 'root' | 'none',
    routerAction?: 'push' | 'pop' | 'replace',
    routerAnimation?: AnimationBuilder
  ) => void;
}

useIonRouter(): UseIonRouterResult;

• pushメソッドは、ionRouter.navigate(location, 'forward', 'push', animation)を呼び出すことと同等です。

• replaceメソッドは、ionRouter.navigate(location, 'root', 'replace', animation)を呼び出すことと同等です。

使用例については、Vueナビゲーションドキュメントを参照してください。

ハードウェアバックボタン

useBackButton関数は、Androidのハードウェアバックボタンが押されるたびに起動するコールバック関数を登録するために使用できます。さらに、優先度パラメータを受け入れることで、複数のハンドラが登録されている場合にどのハンドラが最初に起動するかを開発者がカスタマイズできます。

import { useBackButton } from '@ionic/vue';

...

useBackButton(10, () => {
  console.log('Hardware Back Button was called!');
});

インターフェース

type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
interface UseBackButtonResult {
  unregister: () => void;
}

useBackButton(priority: number, handler: Handler): UseBackButtonResult;

詳細情報と使用例については、ハードウェアバックボタンドキュメントを参照してください。

省略 (日本語への翻訳は不要)注記

useBackButtonコールバックは、アプリがCapacitorまたはCordovaで実行されている場合にのみ起動します。詳細については、CapacitorおよびCordovaのハードウェアバックボタンを参照してください。

キーボード

useKeyboard関数は、オンスクリーンキーボードの状態を含むオブジェクトを返します。このオブジェクトは、オンスクリーンキーボードが表示されているかどうか、キーボードの高さがピクセル単位でどのくらいかなどの情報を提供します。この情報はVue refで提供されるため、アプリケーションでリアクティブになります。

import { watch } from 'vue';
import { useKeyboard } from '@ionic/vue';

const { isOpen, keyboardHeight } = useKeyboard();

watch(keyboardHeight, () => {
  console.log(`Keyboard height is ${keyboardHeight.value}px`);
});

インターフェース

interface UseKeyboardResult {
  isOpen: Ref<boolean>;
  keyboardHeight: Ref<number>;
  unregister: () => void
}

useKeyboard(): UseKeyboardResult;

詳細情報と使用例については、キーボードドキュメントを参照してください。

Ionicライフサイクル

Ionic Vueは、setup()関数がIonic Frameworkページのライフサイクルを利用するためのいくつかのライフサイクルフックを提供します。

import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonPage },
  setup() {
    onIonViewDidEnter(() => {
      console.log('Page did enter');
    });

    onIonViewDidLeave(() => {
      console.log('Page did leave');
    });

    onIonViewWillEnter(() => {
      console.log('Page will enter');
    });

    onIonViewWillLeave(() => {
      console.log('Page will leave');
    });
  },
});

省略 (日本語への翻訳は不要)注記

ライフサイクルメソッドとフックが正しく起動するには、アプリのページでIonPageコンポーネントを使用する必要があります。

詳細情報と使用例については、Vueライフサイクルドキュメントを参照してください。