Ionic Framework 中的导航组件为应用程序导航提供了结构。它们允许用户在应用程序的不同视图和页面之间移动，同时保持历史记录、支持手势并提供流畅的过渡。本页面涵盖了核心导航组件、它们如何协同工作以及实现 Ionic 应用程序导航模式的关键 API 功能。
有关 Menu 等特定导航组件的详细信息，请参阅 Menu 组件。有关 Segments 和 Tabs 的详细信息，请参阅 Segments 和 Tabs。
Ionic 的导航系统由多个组件协同工作，提供类似原生移动应用的无缝导航体验。这些组件负责视图过渡、历史记录管理、URL 同步和平台特定的行为。
来源
ion-nav 是一个独立的组件，用于管理页面堆栈。它提供了一种传统的推送/弹出导航模式，这种模式常见于移动应用程序。
主要功能
来源
ion-router 是中央路由器，负责协调不同视图之间的导航。它负责将 URL 映射到组件并管理重定向。
主要功能
来源
ion-menu 是一个侧边菜单组件，可用于导航。它可以从屏幕的任一侧滑入，并包含应用程序导航或其他内容。
主要功能
来源
ion-tabs 提供了一个基于选项卡的导航界面，每个选项卡都可以拥有自己的导航堆栈。
主要功能
来源
ion-segment 是一组按钮，允许用户在不同视图之间切换。
主要功能
来源
下图说明了导航如何通过 Ionic 组件进行流程以及导航过程中发生的生命周期事件。
来源
此图显示了 Ionic 中导航组件之间的层级结构和关系
来源
Ionic 的导航系统通过多种机制管理导航状态
| 组件 | 状态管理方面 | 实现 |
|---|---|---|
| ion-router | URL 状态 | 通过 ion-route 组件将 URL 映射到组件视图 |
| ion-router | 历史记录 | 通过 popstate 事件管理浏览器历史记录 |
| ion-nav | 视图堆栈 | 维护视图数组以进行推送/弹出操作 |
| ion-nav | 过渡效果 | 管理视图之间的动画 |
| ion-tabs | 选中的选项卡 | 跟踪活动的选项卡状态 |
| ion-menu | 打开状态 | 管理菜单的打开/关闭状态 |
来源
ion-nav 组件提供类似于原生移动应用程序的推送/弹出导航
关键方法
push()：将新组件添加到导航堆栈pop()：从堆栈中移除顶部组件setRoot()：替换根组件popToRoot()：导航回堆栈中的第一个组件来源
ion-router 支持应用程序通过 URL 进行导航
路由使用 ion-route 组件进行定义
来源
ion-menu 提供了一个侧边菜单，可用于导航
菜单可以通过 `contentId` 属性与内容连接
来源
ion-tabs 提供标签页导航
标签页通常定义如下
来源
ion-segment 提供了一个分段控件，用于切换视图
分段按钮通常定义如下
来源
Ionic 的导航系统可以与框架路由器一起使用，也可以独立使用
路由集成支持：
来源
Ionic 导航组件在导航过程中会触发事件，可以用于响应导航变化
| 组件 | 事件 | 描述 |
|---|---|---|
| ion-router | ionRouteWillChange | 在路由即将更改时触发 |
| ion-router | ionRouteDidChange | 在路由更改后触发 |
| ion-nav | ionNavWillChange | 在导航即将发生时触发 |
| ion-nav | ionNavDidChange | 在导航完成后触发 |
| ion-tabs | ionTabsWillChange | 在标签页即将更改时触发 |
| ion-tabs | ionTabsDidChange | 在标签页更改后触发 |
| ion-menu | ionWillOpen | 在菜单即将打开时触发 |
| ion-menu | ionDidOpen | 在菜单打开后触发 |
| ion-menu | ionWillClose | 在菜单即将关闭时触发 |
| ion-menu | ionDidClose | 在菜单关闭后触发 |
| ion-segment | ionChange | 在分段控件值更改时触发 |
来源
Ionic 导航组件支持手势导航
| 组件 | 手势 | 配置属性 |
|---|---|---|
| ion-nav | 滑动返回 | swipeGesture |
| ion-menu | 滑动打开 | swipeGesture |
| ion-segment | 滑动切换分段 | swipeGesture |
这些手势为移动应用程序提供了类似原生般的体验。
来源
根据应用程序的需求选择合适的导航组件
许多应用程序会结合使用这些组件，以获得全面的导航体验。
来源