Skip to main content
Version: v6

ion-router-outlet

shadow

The router outlet behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out.

Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router.

Life Cycle Hooks

Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations

Event NameTrigger
ionViewWillEnterFired when the component routing to is about to animate into view.
ionViewDidEnterFired when the component routing to has finished animating.
ionViewWillLeaveFired when the component routing from is about to animate.
ionViewDidLeaveFired when the component routing to has finished animating.

These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition.

For handling Router Guards, the older ionViewCanEnter and ionViewCanLeave have been replaced with their framework specific equivalent. For Angular, there are Router Guards.

Properties

animated

Descriptiontrueの場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。
Attributeanimated
Typeboolean
Defaulttrue

animation

Descriptionこのプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
DefaultgetIonMode(this)

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.