HarmonyOS 鸿蒙Next中组件导航和页面路由

HarmonyOS 鸿蒙Next中组件导航和页面路由

@Builder
export function MyCommonPageBuilder(name:string,param:string){
  MyCommonPage({name:name,value:param})
}
@Component
export struct MyCommonPage{
  pathInfos:NavPathStack = new NavPathStack();
  name:string = '';
  @State value:String='';
}
build() {
  NavDestination() {
    Column() {
      Text(`${this.name}设置页面`)
        .width('100%')
        .fontSize(24)
        .fontColor(0x333333)
        .textAlign(TextAlign.Center)
        .textShadow({
          radius: 2,
          offsetX: 4,
          offsetY: 4,
          color: 0x909399
        })
        .padding({ top: 30 })
          .padding({ top: 30 })
        Text(`${JSON.stringify(this.value)}`)
          .width('100%')
          .fontSize(22)
          .fontColor(0x666666)
          .textAlign(TextAlign.Center)
          .padding({ top: 45 })
          .onClick(() => {
            this.pathInfos.pop();
          })
      }.size({ width: '100%', height: '100%' })
    }.title(`${this.name}`).onReady((ctx:NavDestinationContext)=>{
      this.pathInfos = ctx.pathStack;
    })
} 各位大神：为什么那么多错误？

更多关于HarmonyOS 鸿蒙Next中组件导航和页面路由的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已经发现问题了，是我自己学术不精，[汗][汗][汗]

更多关于HarmonyOS 鸿蒙Next中组件导航和页面路由的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，组件导航和页面路由通过Router模块实现。使用router.pushUrl()进行页面跳转，支持标准路由和单实例路由模式。页面参数通过params传递，目标页面通过router.getParams()获取。router.back()用于返回上一页。导航栏可通过Navigation组件配置，支持标题、菜单和自定义控件。页面生命周期由onPageShow和onPageHide管理。路由依赖页面栈结构，支持动态路由和拦截功能。

在HarmonyOS Next中，组件导航和页面路由需要遵循特定的语法和结构。从提供的代码看，存在几个关键问题：

  1. @Builder函数定义错误：MyCommonPageBuilder函数缺少返回类型声明，应改为：
[@Builder](/user/Builder)
function MyCommonPageBuilder(name: string, param: string): void {
  MyCommonPage({name: name, value: param})
}
  1. 组件结构不完整：MyCommonPage组件的build方法缺少正确的闭合括号和NavDestination的完整定义。正确的结构应该是：
@Component
struct MyCommonPage {
  // 属性定义...
  
  build() {
    NavDestination() {
      Column() {
        // 内容组件
      }
    }
    .title(this.name)
    .onReady((ctx: NavDestinationContext) => {
      this.pathInfos = ctx.pathStack;
    })
  }
}

  1. 语法错误：

    • 多余的括号和缩进问题
    • 字符串模板使用不规范
    • 样式链式调用格式错误

  2. 类型声明问题：@State value: String应使用小写的string类型。

建议重新组织代码结构，确保组件声明、build方法和装饰器的正确使用。导航栈操作需要确保在正确的生命周期内执行。

回到顶部