HarmonyOS router转Navigation

router转Navigation有几个问题需要咨询：

1、提供Hap包给主应用的，如果仅从router切换到了navigation，主应用那边还是用router可以做到兼容吗？

2、Navigation可以只用路由的能力，不用组件吗？

3、文档里面子页面需要用NavDestination组件，如果有个页面既是主页面，又是子页面要怎么处理？

HarmonyOS

zbw_apple

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

1、若需要router和Navigation混用，需要在router跳转到的页面使用Navigation组件重新开启新的Navigation，参考示例：

//index.ets (在main_page.json中注册)
@Entry
@Component
struct Index {
  pageInfo: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pageInfo) {
      Column() {
        Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfo.pushPath({ name: 'pageOne' })
          })
      }
    }.title('NavIndex')
  }
}

//PageOne.ets （需要注册routermap）
import { router } from '@kit.ArkUI';

@Builder
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}

@Component
struct PageOne {
  pageInfo: NavPathStack = new NavPathStack();
  @State message: string = 'pageOne'

  build() {
    NavDestination() {
      Text(this.message)
        .width('80%')
        .height(50)
        .margin(10)
      Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
        .width('80%')
        .height(40)
        .margin(10)
        .onClick(() => {
          //使用router跳转到下一个页面
          router.pushUrl({
            url: "pages/PageRouterOne"
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

//PageRouterOne.ets (在main_page.json中注册)
@Entry
@Component
struct PageRouterOne {
  pageInfo: NavPathStack = new NavPathStack();
  @State message: string = 'Hello World';

  build() {
    Navigation(this.pageInfo) {
      Text(this.message)
        .id('PageRouterOneHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: 'container', align: VerticalAlign.Center },
          middle: { anchor: 'container', align: HorizontalAlign.Center }
        })
      Button("看看下面").onClick(() => {
        this.pageInfo.pushPath({ name: "pageTwo" })
      })
    }
    .height('100%')
    .width('100%')
  }
}

//PageTwo.ets（需要注册routermap）
@Builder
export function PageTwoBuilder(name: string, param: Object) {
  PageOne()
}

@Component
struct PageOne {
  pageInfo: NavPathStack = new NavPathStack();
  @State message: string = 'pageTwo'

  build() {
    NavDestination() {
      Text(this.message)
        .width('80%')
        .height(50)
        .margin(10)
      Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
        .width('80%')
        .height(40)
        .margin(10)
    }
    .height('100%')
    .width('100%')
  }
}

//router_map.json
{
  "routerMap": [
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is pageOne"
      }
    },
    {
      "name": "pageTwo",
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
      "buildFunction": "PageTwoBuilder"
    }
  ]
}

2、Navigation可以只使用路由的能力。

3、一个页面既是主页面又是子页面，可以将该页面设计为同时具备主页面和子页面的功能。例如可以在主页面中使用NavDestination组件来管理子页面的导航，并在子页面中嵌套NavDestination组件来管理其自身的导航。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5#%E5%AD%90%E9%A1%B5%E9%9D%A2

2天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS router转Navigation

订阅鸿蒙技术特刊，精选内容抢先看