HarmonyOS鸿蒙Next中NavRouter的使用与实现

HarmonyOS鸿蒙Next中NavRouter的使用与实现 在使用Navigation出现的问题，就是进入app后，原本应该显示NavDestination的地方是空白的，但是点击其他栏目再回去就可以正常显示了，index的问题吗，但是设置的index就是0呀，然后实验了发现进入主界面后NavDestination根本就没有加载呀，资料太少了也找不到，求大神解答，刚入门，救急

代码在这，帮忙看看

@Entry
@Component
struct NavRouterExample {
  private arr: number[] = [0, 1, 2, 3]
  @State isActive: boolean = false
  @State dex: number = 0
  
  build() {
    Column() {
      Navigation() {
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number, index: number) => {
            ListItem() {
              Row() {
                Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
                Text(`NavRouter${item + 1}`)
                  .fontSize(22)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
              }
              .width(180)
              .height(72)
              .backgroundColor(this.dex === index ? '#ccc' : '#fff')
              .borderRadius(24)

              NavDestination() {
                Text(`我是NavDestination第${item + 1}页内容`).fontSize(50)
                Flex({ direction: FlexDirection.Row }) {
                  Row() {
                    Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
                    Text('今天共有七节课').fontSize(30)
                  }
                  .padding({ left: 15 })
                }
              }
              .backgroundColor('#ccc')
              .title(`NavDestination${item + 1}`)
            }
            .onStateChange((isActivated: boolean) => {
              this.dex = index
            })
          }, item => item)
        }
        .height('100%')
        .margin({ top: 12, left: 12 })

      }
      .mode(NavigationMode.Split)
      .hideTitleBar(true)
      .hideToolBar(true)
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中NavRouter的使用与实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复 
@Entry
@Componentstruct NavRouterExample {
  private arr: number[] = [0, 1, 2, 3]
  @State dex: number = -1
  build() {
    Column() {
      Navigation() {
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number, index: number = 0) => {
            ListItem() {
              NavRouter() {
                Row() {
                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
                  Text(`NavRouter${item + 1}`)
                    .fontSize(22)
                    .fontWeight(500)
                    .textAlign(TextAlign.Center)
                }
                .width(180)
                .height(72)
                .backgroundColor(this.dex === index ? '#ccc' : '#fff')
                .borderRadius(24)
                NavDestination() {
                  Text(`我是NavDestination第${item + 1}页内容`).fontSize(50)
                  Flex({ direction: FlexDirection.Row }) {
                    Row() {
                      Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
                      Text('今天共有七节课').fontSize(30)
                    }
                    .padding({ left: 15 })
                  }
                }
                .backgroundColor('#ccc')
                .title(`NavDestination${item + 1}`)
              }
              .onStateChange((isActivated: boolean) => {
                if (isActivated) {
                  this.dex = index
                }
              })
            }
          }, (item: number) => item.toString())
        }
        .height('100%')
        .margin({ top: 12, left: 12 })
      }
      .mode(NavigationMode.Split)
      .hideTitleBar(true)
      .hideToolBar(true)
    }
    .height('100%')
  }
}

楼主您好，可以参考以上代码

更多关于HarmonyOS鸿蒙Next中NavRouter的使用与实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我想打开以后默认选择的就是第一个页面然后显示，这样子修改以后我这边还是需要点击以后才会显示页面，

在HarmonyOS鸿蒙Next中，NavRouter是用于实现页面导航的核心组件。它通过路由机制管理页面之间的跳转，支持多种导航方式，如栈式导航、标签导航等。NavRouter的使用主要包括以下几个步骤：

  1. 路由配置：在config.json中定义路由规则，指定页面路径与组件的映射关系。
  2. 页面跳转：通过NavRouter.push或NavRouter.replace方法实现页面跳转，push会将新页面压入栈中，replace则会替换当前页面。
  3. 参数传递：跳转时可通过params传递参数，目标页面通过this.props.params获取。
  4. 返回处理：使用NavRouter.back方法返回上一页面，支持传递返回结果。
  5. 生命周期：NavRouter会触发页面的生命周期方法，如onShow、onHide等，开发者可在这些方法中处理页面显示与隐藏的逻辑。

NavRouter的设计遵循了鸿蒙系统的组件化思想，通过声明式配置与命令式操作结合，简化了页面导航的实现。

在HarmonyOS鸿蒙Next中，NavRouter用于实现页面导航和路由管理。通过NavRouter，开发者可以定义页面之间的跳转逻辑，并管理导航栈。使用步骤如下：

  1. 定义路由表：在resources/base/profile目录下创建router.json文件，定义页面路径与组件的映射关系。
  2. 配置页面路径：在config.json中配置页面的route属性，指定页面的路径。
  3. 使用NavRouter导航：在代码中通过NavRouter.push或NavRouter.replace方法实现页面跳转，push会将新页面压入栈，replace会替换当前页面。
  4. 处理返回事件：通过NavRouter.back方法返回上一页面，或监听onBackPress事件自定义返回逻辑。

NavRouter简化了页面导航的管理，支持参数传递和动态路由，适用于复杂的多页面应用场景。

回到顶部