版本：v8

ion-route

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

备注

注意：此组件仅应使用于 vanilla 和 Stencil JavaScript 项目。对于 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

说明	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.
属性	`undefined`
类型	`(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`
默认值	`undefined`

beforeLeave

说明	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.
属性	`undefined`
类型	`(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`
默认值	`undefined`

component

说明	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.
属性	`component`
类型	`string`
默认值	`undefined`

componentProps

说明	A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
属性	`undefined`
类型	`undefined ｜ { [key: string]: any; }`
默认值	`undefined`

url

说明	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.
属性	`url`
类型	`string`
默认值	`''`

事件

Name	说明	冒泡
`ionRouteDataChanged`	Used internally by `ion-router` to know when this route did change.	`true`

方法

该组件没有可用的公共方法。

CSS Shadow Parts

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。

导航钩子​

接口​

用法​

属性​

beforeEnter​

beforeLeave​

component​

componentProps​

url​

事件​

方法​

CSS Shadow Parts​

CSS 自定义属性​

插槽​

目录