实用函数

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