跳到主要内容
版本:v7

ion-router-outlet

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