路由组件

路由组件是用于处理原生 JavaScript 和 Stencil 项目中路由的组件。

备注

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

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

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

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

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

基本用法

接口

RouterEventDetail

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

RouterCustomEvent

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

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

用法

<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>

属性

root

Description	The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
Attribute	root
Type	string
Default	'/'

useHash

Description	The 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.
Attribute	use-hash
Type	boolean
Default	true

事件

Name	Description	Bubbles
ionRouteDidChange	Emitted when the route had changed	true
ionRouteWillChange	Event emitted when the route is about to change	true

方法

back

Description	Go back to previous page in the window.history.
Signature	back() => Promise<void>

push

Description	Navigate to the specified path.
Signature	push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
Parameters	path: The path to navigate to. direction: The direction of the animation. Defaults to "forward". animation: A custom animation to use for the transition.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

No CSS custom properties available for this component.

插槽

No slots available for this component.