Skip to main content

ion-router

路由是一个用于处理普通和 Stencil JavaScript 项目内部路由的组件。

🌐 The router is a component for handling routing inside vanilla and Stencil JavaScript projects.

note

注意：此组件应仅用于原生 JavaScript 和 Stencil JavaScript 项目。有关特定框架的路由解决方案，请参阅 Angular、React 和 Vue 的路由指南。

应用的代码库中应只有一个 ion-router 组件。该组件控制与浏览器历史记录的所有交互，并通过事件系统汇总更新。

🌐 Apps should have a single ion-router component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system.

ion-router 只是 Ionic 导航出口的 URL 协调器：ion-nav、ion-tabs 和 ion-router-outlet。

这意味着 ion-router 从未接触过 DOM，它不会显示组件或触发任何类型的生命周期事件，它只是告诉 ion-nav、ion-tabs 和 ion-router-outlet 根据浏览器的 URL 何时以及显示什么。

🌐 That means the ion-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells ion-nav, ion-tabs, and ion-router-outlet what and when to "show" based on the browser's URL.

为了配置组件（用于加载/选择）与 URL 之间的这种关系，ion-router 使用使用 JSX/HTML 的声明式语法来定义路由树。

🌐 In order to configure this relationship between components (to load/select) and URLs, ion-router uses a declarative syntax using JSX/HTML to define a tree of routes.

基本用法​

🌐 Basic Usage

接口​

🌐 Interfaces

RouterEventDetail​

interface RouterEventDetail {
  from: string | null;
  redirectedFrom: string | null;
  to: string;
}

RouterCustomEvent​

虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对从此组件发出的 Ionic 事件进行更强类型的处理。

🌐 While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface RouterCustomEvent extends CustomEvent {
  detail: RouterEventDetail;
  target: HTMLIonRouterElement;
}

用法​

🌐 Usage

<ion-router>
  <ion-route component="page-tabs">
    <ion-route url="/schedule" component="tab-schedule">
      <ion-route component="page-schedule"></ion-route>
      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
    </ion-route>

    <ion-route url="/speakers" component="tab-speaker">
      <ion-route component="page-speaker-list"></ion-route>
      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
      <ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
    </ion-route>

    <ion-route url="/map" component="page-map"></ion-route>
    <ion-route url="/about" component="page-about"></ion-route>
  </ion-route>

  <ion-route url="/tutorial" component="page-tutorial"></ion-route>
  <ion-route url="/login" component="page-login"></ion-route>
  <ion-route url="/account" component="page-account"></ion-route>
  <ion-route url="/signup" component="page-signup"></ion-route>
  <ion-route url="/support" component="page-support"></ion-route>
</ion-router>

属性​

🌐 Properties

root​

DescriptionThe root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
Attributeroot
Typestring
Default'/'

useHash​

DescriptionThe router can work in two "modes": - With hash: /index.html#/path/to/page - Without hash: /path/to/page

Using one or another might depend in the requirements of your app and/or where it's deployed.

Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.

On the other side hash-navigation is much easier to deploy, it even works over the file protocol.

By default, this property is true, change to false to allow hash-less URLs.
Attributeuse-hash
Typeboolean
Defaulttrue

事件​

🌐 Events

NameDescriptionBubbles
ionRouteDidChangeEmitted when the route had changedtrue
ionRouteWillChangeEvent emitted when the route is about to changetrue

方法​

🌐 Methods

back​

DescriptionGo back to previous page in the window.history.
Signatureback() => Promise<void>

push​

DescriptionNavigate to the specified path.
Signaturepush(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
Parameterspath: The path to navigate to.
direction: The direction of the animation. Defaults to "forward".
animation: A custom animation to use for the transition.

CSS 阴影部分​

🌐 CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性​

🌐 CSS Custom Properties

No CSS custom properties available for this component.

插槽​

🌐 Slots

No slots available for this component.

目录