HarmonyOS 鸿蒙Next navigationDemo

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@Provide](/user/Provide)('pageInfos') pageInfos: NavPathStack = new NavPathStack()
 isLogin: boolean = false;
 [@State](/user/State) fontColor: string = '#182431'
 [@State](/user/State) selectedFontColor: string = '#007DFF'
 [@State](/user/State) currentIndex: number = 0
 private controller: TabsController = new TabsController()

 [@Builder](/user/Builder)
 PagesMap(name: string) {
   if (name == 'Login') {
     Login()
   }
 }

 [@Builder](/user/Builder)
 tabBuilder(index: number, name: string) {
   Column() {
     Text(name)
       .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
       .fontSize(16)
       .fontWeight(this.currentIndex === index ? 500 : 400)
       .lineHeight(22)
       .margin({ top: 17, bottom: 7 })
     Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0)
   }.width('100%')
 }

 build() {
   Navigation(this.pageInfos) {
     Button('登录模块').width('80%').margin(2).onClick(() => {
       this.pageInfos.pushPathByName('Login', '');
     })
     NavRouter() {
       Button('页1').width('80%').margin(2)
       NavDestination() {
         Text("页1")
       }
     }

     NavRouter() {
       Button('页2').width('80%').margin(2)
       NavDestination() {
         Text("页2")
       }
     }

     NavRouter() {
       Button('页3').width('80%').margin(2)
       NavDestination() {
         Text("页3")
       }
     }

     Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#00CB87')
       }.tabBar(this.tabBuilder(0, 'green'))

       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#007DFF')
       }.tabBar(this.tabBuilder(1, 'blue'))

       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#FFBF00')
       }.tabBar(this.tabBuilder(2, 'yellow'))

       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#E67C92')
       }.tabBar(this.tabBuilder(3, 'pink'))
     }
     .vertical(false)
     .barMode(BarMode.Fixed)
     .barWidth(360)
     .barHeight(56)
     .animationDuration(400)
     .onChange((index: number) => {
       this.currentIndex = index
     })
     .width(360)
     .height(296)
     .margin({ top: 52 })
     .backgroundColor('#F1F3F5')
   }.navDestination(this.PagesMap)
 }
}

[@Component](/user/Component)
struct Login {
 build() {
   NavDestination() {
     Navigation() {
       NavRouter() {
         Button('功能1').width('80%').margin(2)
         NavDestination() {
           Text("页1")
         }
       }

       NavRouter() {
         Button('功能2').width('80%').margin(2)
         NavDestination() {
           Text("页2")
         }
       }

       NavRouter() {
         Button('功能3').width('80%').margin(2)
         NavDestination() {
           Text("页3")
         }
       }
     }
   }
 }
}

整体navigation demo可以参考该链接
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5