深入浅出ArkTS开发指南之底部导航和页面跳转

大家好，我是全栈的峰哥，独立开发者，相关问题可以加v:2588234，联系我一起沟通

今天带来的知识是Navigation组件的使用，同时通过属性：toolbarConfiguration的配置，配合router.pushUrl的运用，实现底部导航切换到首页、会员中心，同时支持多个Navigation，并跳转到NavDestination子页面中。

定义首页

首先我们先创建一个 Index.ets 页面，注意首页路径，如下伪代码所示

@Entry
@ComponentV2
struct MainPage {
  pathStack: NavPathStack = new NavPathStack()
   build() {
 
    Column() {
      Navigation(this.pathStack) {
          Column(){
              Text("首页")
          }
      }.mode(NavigationMode.Auto)
      .toolbarConfiguration([
       {
          value: "首页",
          action: () => {
          }
        },
         {
          value: "我的",
          action:()=>{
            router.pushUrl({
              url:"pages/MemberPage"
            })
          }
        }
      ])
      .hideTitleBar(true)
  }
}

定义会员中心

@Entry
@ComponentV2
struct MemberPage {
  pathStack: NavPathStack = new NavPathStack()
   build() {
 
    Column() {
      Navigation(this.pathStack) {
          Column(){
              Text("会员中心")
              Text("点击设置")
              .onClick(()=>{
                  this.pathStack.pushPathByName("SettingPage",null)
              })
          }
      }.mode(NavigationMode.Auto)
      .toolbarConfiguration([
       {
          value: "首页",
          action: () => {
              router.pushUrl({
                  url:"pages/IndexPage"
                })
          }
        },
         {
          value: "我的",
          action:()=>{
             
          }
        }
      ])
      .hideTitleBar(true)
  }
}

此时两个页面已经定义好了，那么我们在增加一个会员设置页面，相当于会员中心中增加跳转到设置信息页面

定义会员设置页面

@Entry
@ComponentV2
struct SettingPage {
   build() {
 
    Column() {
      NavDestination() {
          Column(){
              Text("设置页面")
              Text("点击设置")
          }
      }
  }
}