工具函数

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()) {
      // 在此处执行某些操作
    }
  }
}

有关 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('硬件返回按钮被调用！');
});

接口

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(`键盘高度为 ${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('页面已进入');
    });

    onIonViewDidLeave(() => {
      console.log('页面已离开');
    });

    onIonViewWillEnter(() => {
      console.log('页面即将进入');
    });

    onIonViewWillLeave(() => {
      console.log('页面即将离开');
    });
  },
});

备注

应用中的页面需要使用 IonPage 组件，生命周期方法和钩子才能正确触发。

更多信息和用法示例请参阅 Vue 生命周期文档。