Skip to main content

实用函数

🌐 Utility Functions

Ionic Vue 附带了多个实用功能，你可以在应用中使用这些实用功能来简化某些任务，例如管理屏幕键盘和硬件后退按钮。

🌐 Ionic Vue ships with several utility functions that you can use in your application to make certain tasks easier such as managing the on-screen keyboard and the hardware back button.

路由​

🌐 Router

函数​

🌐 Functions

useIonRouter​

▸ useIonRouter(): UseIonRouterResult

返回 Ionic 路由实例，包含用于导航、定制页面过渡以及本地功能的路由上下文的 API 方法。此函数可以与 Vue 中的 useRouter 结合使用。

🌐 Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the useRouter from Vue.

自定义页面过渡

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

const router = useIonRouter();
const push = () => {
  router.push('/page2', customAnimation);
};
const back = () => {
  router.back(customAnimation);
};

安卓硬件返回键

你可能想知道当用户按下 Android 上的硬件后退按钮时你是否位于应用的根页面。

🌐 You may want to know if you are at the root page of the application when a user presses the hardware back button on Android.

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

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

有关带有 Vue 路由的其他 API，请参阅 Vue Router 文档。

🌐 For additional APIs with Vue routing, please refer to the Vue Router documentation.

接口​

🌐 Interfaces

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',
    routerAction?: 'push' | 'pop' | 'replace',
    routerAnimation?: AnimationBuilder
  ) => void;
}

useIonRouter(): UseIonRouterResult;
  • push 方法相当于调用 ionRouter.navigate(location, 'forward', 'push', animation)。
  • replace 方法相当于调用 ionRouter.navigate(location, 'root', 'replace', animation)。

有关更多用法示例，请参阅 Vue 导航文档。

🌐 See the Vue Navigation Documentation for more usage examples.

硬件后退按钮​

🌐 Hardware Back Button

useBackButton 函数可以用于注册一个回调函数，当 Android 的硬件返回按钮被按下时触发。此外，它还接受一个优先级参数，允许开发者自定义如果注册了多个处理程序时，哪个处理程序先触发。

🌐 The useBackButton function can be used to register a callback function to fire whenever the hardware back button on Android is pressed. Additionally it accepts a priority parameter, allowing developers to customize which handler fires first if multiple handlers are registered.

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

...

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

接口​

🌐 Interfaces

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

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

有关更多信息和使用示例，请参见硬件返回按钮文档。

🌐 See the Hardware Back Button Documentation for more information and usage examples.

note

useBackButton 回调只会在你的应用运行在 Capacitor 或 Cordova 时触发。更多信息请参见 Capacitor 和 Cordova 中的硬件返回按钮。

键盘​

🌐 Keyboard

useKeyboard 函数返回一个包含屏幕键盘状态的对象。该对象提供的信息包括屏幕键盘是否显示以及键盘的像素高度。此信息以 Vue 的 ref 提供，因此在你的应用中它将是响应式的。

🌐 The useKeyboard function returns an object that contains the state of the on-screen keyboard. This object provides information such as whether or not the on-screen keyboard is presented and what the height of the keyboard is in pixels. This information is provided in a Vue ref so it will be reactive in your application.

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

const { isOpen, keyboardHeight } = useKeyboard();

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

接口​

🌐 Interfaces

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

useKeyboard(): UseKeyboardResult;

有关更多信息和使用示例，请参阅键盘文档。

🌐 See the Keyboard Documentation for more information and usage examples.

Ionic 生命周期​

🌐 Ionic Lifecycles

Ionic Vue 为 setup() 函数提供了几个生命周期钩子，以便接入 Ionic 框架的页面生命周期。

🌐 Ionic Vue provides several lifecycle hooks for the setup() function to tap into the Ionic Framework page lifecycle.

<script setup lang="ts">
import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';

onIonViewDidEnter(() => {
  console.log('Page did enter');
});

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

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

onIonViewWillLeave(() => {
  console.log('Page will leave');
});
</script>
note

你的应用中的页面需要使用 IonPage 组件，以便生命周期方法和钩子能够正常触发。

有关更多信息和使用示例，请参阅 Vue 生命周期文档。

🌐 See the Vue Lifecycle Documentation for more information and usage examples.

目录