鸿蒙开发使用Navigation

最新推荐文章于 2025-08-22 13:26:47 发布

原创最新推荐文章于 2025-08-22 13:26:47 发布 · 318 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #运维

由于代秒比较死所以直接粘贴官网

文档中心

第一步：

"routerMap": "$profile:route_map",

创建文件

route_map.json

内容

{
  "routerMap": [
    {
      "name": "pageGuide",
      "pageSourceFile": "src/main/ets/pages/PageGuide.ets",
      "buildFunction": "PageGuideBuilder",
      "data": {
        "description": "this is pageOne"
      }
    },
    {
      "name": "pageIndex",
      "pageSourceFile": "src/main/ets/pages/PageIndex.ets",
      "buildFunction": "PageIndexBuilder"
    }
  ]
}

然后创建两个arkts

PageIndex.ets

/**
 * 主页面
 */
@Builder
export function PageIndexBuilder(name: string, param: Object) {
  PageIndex()
}

@Component
export struct PageIndex {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {

    }.title('PageIndex')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
    })

  }
}

PageGuide.ets


/**
 * 引导页  广告页 第一个页面
 */
@Builder
export function PageGuideBuilder(name: string, param: Object) {
  PageGuide()
}

@Component
export struct PageGuide {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Button('跳转首页')
        .onClick(()=>{
          this.pathStack.pushPathByName("PageIndex",null,false);
        })
    }.title('PageGuide')
    .onReady((context :NavDestinationContext)=>{
      this.pathStack = context.pathStack
    })
  }
}