版本：v7

ion-route

路由组件接收一个组件，并在浏览器 URL 匹配 url 属性时渲染该组件。

备注

注意：此组件应仅用于原生 JavaScript 和 Stencil 项目。对于 Angular 项目，请使用 ion-router-outlet 和 Angular 路由器。

导航钩子

导航钩子可用于执行任务或充当导航守卫。通过为每个 ion-route 的 beforeEnter 和 beforeLeave 属性提供函数来使用钩子。返回 true 允许导航继续，而返回 false 则取消导航。返回 NavigationHookOptions 类型的对象允许你将导航重定向到另一页面。

接口

interface NavigationHookOptions {
  /**
   * 用于重定向导航的有效路径。
   */
  redirect: string;
}

用法

Javascript
Stencil
Vue

<ion-router>
  <ion-route url="/home" component="page-home"></ion-route>
  <ion-route url="/dashboard" component="page-dashboard"></ion-route>
  <ion-route url="/new-message" component="page-new-message"></ion-route>
  <ion-route url="/login" component="page-login"></ion-route>
</ion-router>

const dashboardPage = document.querySelector('ion-route[url="/dashboard"]');
dashboardPage.beforeEnter = isLoggedInGuard;

const newMessagePage = document.querySelector('ion-route[url="/dashboard"]');
newMessagePage.beforeLeave = hasUnsavedDataGuard;

const isLoggedInGuard = async () => {
  const isLoggedIn = await UserData.isLoggedIn(); // 请替换为实际的登录验证逻辑

  if (isLoggedIn) {
    return true;
  } else {
    return { redirect: '/login' }; // 如果用户未登录，将被重定向至 /login 页面
  }
};

const hasUnsavedDataGuard = async () => {
  const hasUnsavedData = await checkData(); // 请替换为实际的验证逻辑

  if (hasUnsavedData) {
    return await confirmDiscardChanges();
  } else {
    return true;
  }
};

const confirmDiscardChanges = async () => {
  const alert = document.createElement('ion-alert');
  alert.header = '放弃未保存的更改？';
  alert.message = '确定要离开吗？所有未保存的更改都将丢失。';
  alert.buttons = [
    {
      text: '取消',
      role: 'Cancel',
    },
    {
      text: '放弃',
      role: 'destructive',
    },
  ];

  document.body.appendChild(alert);

  await alert.present();

  const { role } = await alert.onDidDismiss();

  return role === 'Cancel' ? false : true;
};

import { Component, h } from '@stencil/core';
import { alertController } from '@ionic/core';

@Component({
  tag: 'router-example',
  styleUrl: 'router-example.css',
})
export class RouterExample {
  render() {
    return (
      <ion-router>
        <ion-route url="/home" component="page-home"></ion-route>
        <ion-route url="/dashboard" component="page-dashboard" beforeEnter={isLoggedInGuard}></ion-route>
        <ion-route url="/new-message" component="page-new-message" beforeLeave={hasUnsavedDataGuard}></ion-route>
        <ion-route url="/login" component="page-login"></ion-route>
      </ion-router>
    );
  }
}

const isLoggedInGuard = async () => {
  const isLoggedIn = await UserData.isLoggedIn(); // 请替换为实际的登录验证逻辑

  if (isLoggedIn) {
    return true;
  } else {
    return { redirect: '/login' }; // 如果用户未登录，将被重定向至 /login 页面
  }
};

const hasUnsavedDataGuard = async () => {
  const hasUnsavedData = await checkData(); // 请替换为实际的验证逻辑

  if (hasUnsavedData) {
    return await confirmDiscardChanges();
  } else {
    return true;
  }
};

const confirmDiscardChanges = async () => {
  const alert = await alertController.create({
    header: '放弃未保存的更改？',
    message: '确定要离开吗？所有未保存的更改都将丢失。',
    buttons: [
      {
        text: '取消',
        role: 'Cancel',
      },
      {
        text: '放弃',
        role: 'destructive',
      },
    ],
  });

  await alert.present();

  const { role } = await alert.onDidDismiss();

  return role === 'Cancel' ? false : true;
};

<template>
  <ion-router>
    <ion-route url="/home" component="page-home"></ion-route>
    <ion-route url="/dashboard" component="page-dashboard" :beforeEnter="isLoggedInGuard"></ion-route>
    <ion-route url="/new-message" component="page-new-message" :beforeLeave="hasUnsavedDataGuard"></ion-route>
    <ion-route url="/login" component="page-login"></ion-route>
  </ion-router>
</template>

<script>
  import { alertController } from '@ionic/vue';

  const isLoggedInGuard = async () => {
    const isLoggedIn = await UserData.isLoggedIn(); // 请替换为实际的登录验证逻辑

    if (isLoggedIn) {
      return true;
    } else {
      return { redirect: '/login' }; // 如果用户未登录，将被重定向至 /login 页面
    }
  };

  const hasUnsavedDataGuard = async () => {
    const hasUnsavedData = await checkData(); // 请替换为实际的验证逻辑

    if (hasUnsavedData) {
      return await confirmDiscardChanges();
    } else {
      return true;
    }
  };

  const confirmDiscardChanges = async () => {
    const alert = await alertController.create({
      header: '放弃未保存的更改？',
      message: '确定要离开吗？所有未保存的更改都将丢失。',
      buttons: [
        {
          text: '取消',
          role: 'Cancel',
        },
        {
          text: '放弃',
          role: 'destructive',
        },
      ],
    });

    await alert.present();

    const { role } = await alert.onDidDismiss();

    return role === 'Cancel' ? false : true;
  };
</script>

属性

beforeEnter

Description	A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
Attribute	`undefined`
Type	`(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`
Default	`undefined`

beforeLeave

Description	A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
Attribute	`undefined`
Type	`(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`
Default	`undefined`

component

Description	Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
Attribute	`component`
Type	`string`
Default	`undefined`

componentProps

Description	A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

url

Description	Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
Attribute	`url`
Type	`string`
Default	`''`

事件

Name	Description	Bubbles
`ionRouteDataChanged`	Used internally by `ion-router` to know when this route did change.	`true`

方法

No public methods available for this component.

CSS 影子部件

No CSS shadow parts available for this component.

CSS 自定义属性

No CSS custom properties available for this component.

插槽

No slots available for this component.

导航钩子​

接口​

用法​

属性​

beforeEnter​

beforeLeave​

component​

componentProps​

url​

事件​

方法​

CSS 影子部件​

CSS 自定义属性​

插槽​

Contents