跳到主要内容
版本:v8

路由出口组件

shadow

路由出口(router outlet)的行为类似于 Angular 内置的路由出口组件和 Vue 的路由视图组件,但它包含了提供堆叠导航以及在视图间进行进出动画的逻辑。

尽管路由出口本身提供了导航方法,但建议使用您框架路由器中的导航方法。

生命周期钩子

在路由出口中渲染的路由可以访问特定于 Ionic 的事件,这些事件与动画系统相关联:

事件名称触发时机
ionViewWillEnter当即将路由到的组件准备开始进入动画时触发。
ionViewDidEnter当即将路由到的组件已完成进入动画时触发。
ionViewWillLeave当即将离开的组件准备开始离开动画时触发。
ionViewDidLeave当即将离开的组件已完成离开动画时触发。

这些事件与 Ionic 的动画系统紧密集成,可用于在组件完成动画时协调应用程序的各个部分。这些事件并非替代您框架自带的事件系统,而是作为补充。

对于路由守卫(Router Guards)的处理,原有的 ionViewCanEnterionViewCanLeave 已被替换为框架特定的等效方法。对于 Angular,请参考路由守卫

属性

animated

DescriptionIf true, the router-outlet should animate the transition of components.
Attributeanimated
Typeboolean
Defaulttrue

animation

DescriptionThis property allows to create custom transition using AnimationBuilder functions.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
DefaultgetIonMode(this)

事件

No events available for this component.

方法

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.