Navigation是路由容器组件，一般作为首页的根容器。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。
在之前的文章中有介绍如何实现页面的跳转，在页面跳转时，需要传递NavPathStack对象实例，以保证不同的页面中，页面的操作有效性和一致性。
NavPathStack对象传递主要有四种方法。
-
子页面通过OnReady回调获取（在【页面路由导航】三步实现页面跳转的完整示例 中有介绍）。
-
通过全局的AppStorage接口设置获取。
-
通过@Provide和@Consume装饰器，将NavPathStack变量传递给子页面。
-
通过自定义组件查询接口获取。
本篇内容基于【页面路由导航】三步实现页面跳转的完整示例 之上，实现通过 通过@Provide和@Consume装饰器，将NavPathStack变量传递给子页面，主要实现如下
- 在主页面中使用 @Provide 装饰器声明 NavPathStack 变量，并初始化
@Entry
@Component
struct Index {
// 在主页面中使用 @Provide 装饰器声明 NavPathStack 变量，并初始化
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
build() {
Navigation(this.pageStack) {
Column() {
}
}
.hideTitleBar(true)
}
}
- 在子页面中通过 @Consume 装饰器接收父组件传递的 NavPathStack 实例
@Entry
@Component
struct SecondPage_Nav {
// 在子组件中通过 @Consume 装饰器接收父组件传递的 NavPathStack 实例
@Consume('pageStack') pageStack: NavPathStack; // 将 pageStack:NavPathStack|null = null; 替换
build() {
NavDestination() {
}
.title('SecondPage_Nav')
.onReady((context: NavDestinationContext) => {
// this.pageStack = context.pathStack; // 这句不需要了
})
}
}
完成上述改动后，通过@Provide和@Consume装饰器，将NavPathStack变量传递给子页面 的主体代码完成。
