Skip to content

页,导航栈 和状态 ​

路线描述了要去哪里。原生 导航栈 拥有打开的页面。 RouterView 创建一个 NativeScript Frame;路由器协调导航并遵循 Frame 的本地历史记录。

当您从详细信息页面返回、切换选项卡或关闭模式时,这种区别很重要。按照下面的示例一次一步一步进行操作。

概念模型,不是原生模拟器

Home 在本地 ref 中保存搜索词“coast”。此时导航栈只有一个条目。

页面是一个有自己生命周期的条目 ​

push 添加了一个新条目。下面的页面保持安装状态。本地 ref(例如列表查询)属于该保留页面,并且在 Back 之后仍然存在。 replace 删除当前条目; Back 删除顶部条目。删除的页面将被卸载。

在路由页面内,useRoute() 指的是 该页面的路由。打开另一个页面并不会将每个底层页面都变成新的目的地。 useRouter() 的范围为页面所属的 导航栈。页面外,router.currentRoute可以驱动应用级导航UI;它不能替代页面自己的 useRoute()。

状态放在这里寿命
列表查询或滚动相关 UIPage-本地引用/原生视图保留该页面条目
未保存的编辑器文本编辑器页面本地 ref直到编辑器被删除,除非明确保存
注释列表/详细信息共享的数据应用程序存储无论应用程序实现什么持久性
进程死亡后的状态应用程序存储和可选路由器恢复必须显式序列化和恢复

保留页不是持久存储。 第一个应用程序将笔记保存在内存中;关闭进程会丢失它们。当应用程序在进程死亡后需要恢复时,请参阅 restoration。

可见性与安装不同 ​

打开详细信息或模式可以覆盖页面而不将其删除。返回时不再调用其onMounted。显示时使用 onPageActivated 进行刷新,使用 onPageDeactivated 在覆盖时暂停工作,使用 onUnmounted 进行最终清理。 page 生命周期指南 解释了这些钩子。

容器拥有不同的东西 ​

  • RouterView 拥有一个 Frame 导航栈。
  • 选项卡可以在名为导航栈的选项卡中进行选择;切换标签并不意味着重新开始他们的历史。
  • 抽屉导航 包围现有内容。打开它不会创建任何路由条目;它的按钮决定请求哪个导航。
  • 模态路由接收单独的Frame。其中的 useRouter() 导航该模态的 导航栈; Back 在其根部关闭模式。
  • 分割布局具有明确的紧凑/扩展历史规则。在与其他容器组合之前选择支持的所有者。

在嵌套组件之前使用 容器选择。更多的容器并不自动意味着独立的历史。

原生 Back 和 导航守卫 ​

应用程序可以请求router.back(),并且该平台还具有原生按钮和手势。路由器将完成的原生导航与其状态同步。当页面将被 removed 而不仅仅是被推送覆盖时,请保留 导航守卫。

iOS 交互式手势无法等待异步确认。主动离开 导航守卫 会禁用该页面的向后滑动;使用 { when: dirty } 使其在清洁时可用。原生按钮、模式和 Android 行为有自己的支持路径。请参阅 导航守卫 了解平台矩阵。

Next: 构建流程或为您的应用程序选择容器。

基于 MIT 许可证发布。