导航组件
Nav 是一个独立的组件，用于加载任意组件并将新组件推入堆栈。
与 Router Outlet 不同，Nav 不与特定路由器绑定。这意味着如果我们加载一个 Nav 组件，并向堆栈推送其他组件，它们不会影响应用的整体路由。例如，你不应该向 ion-nav 推送一个新组件并期望 URL 会更新。这适用于某些场景，比如你可能需要一个带有自己子导航的模态框，而不希望它与应用的 URL 绑定。
:::注意
ion-nav 不应用于路由。对于路由，请参考 Angular、React 和 Vue 的路由指南，或针对纯 JavaScript 项目的 ion-router 文档。
:::
使用 NavLink
NavLink 是一个与 Nav 交互的简化 API。开发者可以自定义组件，传递组件属性，修改路由动画方向，或在导航时定义自定义动画。
在模态框内导航
模态框可以使用 Nav 来提供独立于 URL 的线性导航。
:::注意
下面的示例使用了 Nav 的引用和公共方法 API 来推送和弹出视图。对于不需要这种精细访问和控制级别的实现，建议使用 NavLink。
:::
接口
NavCustomEvent
虽然不是必需的，但此接口可以替代 CustomEvent 接口，以便对此组件发出的 Ionic 事件进行更严格的类型检查。
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
属性
animated
| Description | If true, the nav should animate the transition of components. |
| Attribute | animated |
| Type | boolean |
| Default | true |
animation
| Description | By default ion-nav animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using AnimationBuilder functions. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
root
| Description | Root NavComponent to load |
| Attribute | root |
| Type | Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined |
| Default | undefined |
rootParams
| Description | Any parameters for the root component |
| Attribute | undefined |
| Type | T ｜ undefined |
| Default | undefined |
swipeGesture
| Description | If the nav component should allow for swipe-to-go-back. |
| Attribute | swipe-gesture |
| Type | boolean ｜ undefined |
| Default | undefined |
事件
| Name | Description | Bubbles |
|---|---|---|
ionNavDidChange | Event fired when the nav has changed components | false |
ionNavWillChange | Event fired when the nav will change components | false |
方法
canGoBack
| Description | Returns true if the current view can go back. |
| Signature | canGoBack(view?: ViewController) => Promise<boolean> |
| Parameters | view: The view to check. |
getActive
| Description | Get the active view. |
| Signature | getActive() => Promise<ViewController ｜ undefined> |
getByIndex
| Description | Get the view at the specified index. |
| Signature | getByIndex(index: number) => Promise<ViewController ｜ undefined> |
| Parameters | index: The index of the view. |
getLength
| Description | Returns the number of views in the stack. |
| Signature | getLength() => Promise<number> |
getPrevious
| Description | Get the previous view. |
| Signature | getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined> |
| Parameters | view: The view to get. |
insert
| Description | Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack. |
| Signature | insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | insertIndex: The index to insert the component at in the stack. component: The component to insert into the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
insertPages
| Description | Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. |
| Signature | insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | insertIndex: The index to insert the components at in the stack. insertComponents: The components to insert into the navigation stack. opts: The navigation options. done: The transition complete function. |
pop
| Description | Pop a component off of the navigation stack. Navigates back from the current component. |
| Signature | pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | opts: The navigation options. done: The transition complete function. |
popTo
| Description | Pop to a specific index in the navigation stack. |
| Signature | popTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | indexOrViewCtrl: The index or view controller to pop to. opts: The navigation options. done: The transition complete function. |
popToRoot
| Description | Navigate back to the root of the stack, no matter how far back that is. |
| Signature | popToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | opts: The navigation options. done: The transition complete function. |
push
| Description | Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams. |
| Signature | push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | component: The component to push onto the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
removeIndex
| Description | Removes a component from the navigation stack at the specified index. |
| Signature | removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | startIndex: The number to begin removal at. removeCount: The number of components to remove. opts: The navigation options. done: The transition complete function. |
setPages
| Description | Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array. |
| Signature | setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | views: The list of views to set as the navigation stack. opts: The navigation options. done: The transition complete function. |
setRoot
| Description | Set the root for the current navigation stack to a component. |
| Signature | setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | component: The component to set as the root of the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
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.