工具函式

Ionic Vue 附帶多個工具函式，您可以在應用程式中使用這些函式，以簡化某些任務，例如管理螢幕鍵盤和硬體返回按鈕。

路由器

函式

useIonRouter

▸ useIonRouter(): UseIonRouterResult

傳回 Ionic 路由器實例，其中包含用於導覽、自訂頁面轉換和用於原生功能的路由內容的 API 方法。此函式可以與 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 路由器文件。

介面

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 生命周期文件。