HarmonyOS鸿蒙Next中官网的Navigation示例文档优化，希望可以加上V2的示例

HarmonyOS鸿蒙Next中官网的Navigation示例文档优化，希望可以加上V2的示例 【描述】：官网的Navigation示例文档，没有V2 的写法，希望可以加上V2的示例。目前就发现了两种写法

一种使用：@Provider 和@Consumer 装饰器，一种使用 @Param 装饰器

相关链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation#示例

【版本信息】：不涉及

【复现代码】：不涉及

【尝试解决方案】：暂无


更多关于HarmonyOS鸿蒙Next中官网的Navigation示例文档优化，希望可以加上V2的示例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发者您好，Navigation主要关注导航相关接口使用，V2状态管理已有文档描述，Navigation使用V2代码可参考如下案例：在两个页面之间存储数据、自定义组件冻结功能（V2）Navigation场景 。另可参考如下demo：

方案一：使用@Provider和@Consumer：

// Index.ets
@Entry
@ComponentV2
struct Index {
  [@Provider](/user/Provider)('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  @Builder
  pageMap(name: string) {
    if (name==='ChildPage'){
      ChildPage()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Button('跳转下一页面')
        .onClick(() => {
          this.pageInfos.pushPathByName('ChildPage', null);
        });
    }
    .navDestination(this.pageMap);
  }
}

@ComponentV2
struct ChildPage {
  [@Consumer](/user/Consumer)('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Button('返回')
        .onClick(() => {
          this.pageInfos.pop()
        });
    };
  }
}

方案二：使用@Param：

// Index.ets
@Entry
@ComponentV2
struct Index {
  @Local pageInfos: NavPathStack = new NavPathStack();

  @Builder
  pageMap(name: string) {
    if (name === 'ChildPage') {
      ChildPage({pageInfos:this.pageInfos});
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Button('跳转下一页面')
        .onClick(() => {
          this.pageInfos.pushPathByName('ChildPage', null);
        });
    }
    .navDestination(this.pageMap);
  }
}

@ComponentV2
struct ChildPage {
  @Require [@Param](/user/Param) pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Button('返回')
        .onClick(() => {
          this.pageInfos.pop();
        });
    }
  }
}

方案三：使用AppStorageV2 ：

// Index.ets
import { AppStorageV2 } from '@kit.ArkUI';

@Entry
@ComponentV2
struct Index {
  pageInfos: NavPathStack = AppStorageV2.connect<NavPathStack>(NavPathStack, () => new NavPathStack())!;

  @Builder
  pageMap(name: string) {
    if (name === 'ChildPage') {
      ChildPage();
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Button('跳转下一页面')
        .onClick(() => {
          this.pageInfos.pushPathByName('ChildPage', null);
        });
    }
    .navDestination(this.pageMap);
  }
}

@ComponentV2
struct ChildPage {
  pageInfos: NavPathStack = AppStorageV2.connect<NavPathStack>(NavPathStack)!;

  build() {
    NavDestination() {
      Button('返回')
        .onClick(() => {
          this.pageInfos.pop();
        });
    }
  }
}

方案四：使用onReady实现：

// Index.ets
@Entry
@ComponentV2
struct Index {
  @Local pageInfos: NavPathStack = new NavPathStack();

  @Builder
  pageMap(name: string) {
    if (name === 'ChildPage') {
      ChildPage();
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Button('跳转下一页面')
        .onClick(() => {
          this.pageInfos.pushPathByName('ChildPage', null);
        });
    }
    .navDestination(this.pageMap);
  }
}

@ComponentV2
struct ChildPage {
  @Local pageInfos: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Button('返回')
        .onClick(() => {
          this.pageInfos.pop();
        });
    }
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
    });
  }
}

后续会上线涉及Navigation使用V2的内容，请持续关注。感谢您的理解与支持。

更多关于HarmonyOS鸿蒙Next中官网的Navigation示例文档优化，希望可以加上V2的示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


就是很不明白，鸿蒙为啥搞那么多版本的状态管理，V1还有V2，是不是以后还会出V3？为啥搞的那么复杂，感觉好乱；

这个怎么说呢感觉V1还是比较简单一点，V2有时候用起来还算是比较繁琐，没有大面积推开，慢慢完善吧。，

是的，

当前鸿蒙Next官网Navigation文档仅包含V1版本示例，V2版本的相关示例尚未补充。开发者可关注后续文档更新。

了解到您的诉求：官网 Navigation 示例文档目前缺少 V2 写法的展示。现有 V2 实践中确实主要有两种方式：

  • @Provider + @Consumer 装饰器：在目标页面中通过 @Consumer 注入 NavigationInfo 或自定义路径信息，在 @Provider 侧（如单例或页面栈管理）完成数据共享，适合跨组件层级较多的场景。

  • @Param + 路由参数装饰器：在跳转时直接传递参数对象，并在目标页面通过 @Param 定义同名属性接收，写法更简洁直观，适合参数明确的页面间通信。

两种方式都能配合 NavPathStack 和 navDestination 使用，实现声明式导航与页面间传参。期待官方文档能尽早补充完整的 V2 示例代码。

回到顶部