Navigation二级导航嵌套

// xxx.ets 
@Entry 
@Component 
struct NavRouterExample { 
  private arr: number[] = [0, 1, 2, 3] 
  @State isActive: boolean = false 
  @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() { 
                  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(20) 
 
                    }.backgroundColor(Color.Pink) 
                    .title(`NavDestination${item + 1}`) 
                  }.onStateChange((isActivated: boolean) => { 
                    if (isActivated) { 
                      this.dex = index; 
                    } 
                  }) 
 
                  Text(`我是NavDestination第${item + 1}页内容`).fontSize(20) 
                }.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%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.