Index.ets

// ✅ 必须加这一行导入 router
import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State currentTitle: string = '首页'
  @State currentIndex: number = 0

  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text(this.currentTitle)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
      }
      .width('100%')
      .height(56)
      .padding({ left: 20 })
      .backgroundColor('#1A1A1A')

      // Tabs 内容
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) {
        // Tab 1：首页
        TabContent() {
          Column() {
            List({ space: 10 }) {
              ForEach([1, 2, 3], (item: number) => {
                ListItem() {
                  Text(`首页列表 ${item}`)
                    .fontColor(Color.White)
                }
                .width('100%')
                .height(100)
                .backgroundColor(Color.Orange)
              })
            }
            .layoutWeight(1)

            // 跳转按钮（简化版）
            Button('跳转到 PageA')
              .onClick(() => {
                // 核心跳转代码
                router.pushUrl({ url: 'pages/PageA' })
              })
              .margin({ bottom: 20 })
          }
          .width('100%')
          .height('100%')
        }
        .tabBar(this.TabBarBuilder('首页', 0))

        // Tab 2：消息
        TabContent() {
          Column() {
            Text('消息页')
              .fontSize(30)
              .fontColor(Color.White)
            Button('跳转到消息详情')
              .onClick(() => {
                router.pushUrl({ url: 'pages/MsgSecondPage' })
              })
              .margin({ top: 20 })
          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .justifyContent(FlexAlign.Center)
        }
        .tabBar(this.TabBarBuilder('消息', 1))

        // Tab 3：我的
        TabContent() {
          Column() {
            Text('我的')
              .fontSize(30)
              .fontColor(Color.White)
          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Orange)
          .justifyContent(FlexAlign.Center)
        }
        .tabBar(this.TabBarBuilder('我的', 2))
      }
      .onChange((index: number) => {
        const titles = ['首页', '消息', '我的']
        this.currentTitle = titles[index]
        this.currentIndex = index
      })
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0F0F0F')
  }

  @Builder
  TabBarBuilder(title: string, index: number) {
    Column() {
      Text(title)
        .fontSize(14)
        .fontColor(this.currentIndex === index ? Color.White : Color.Gray)
    }
    .width('100%')
    .height(56)
    .justifyContent(FlexAlign.Center)
  }
}

PageA.ets（二级页）

// ✅ 必须加这一行导入 router
import router from '@ohos.router'

@Entry
@Component
struct PageA {
  build() {
    Column() {
      // 返回按钮
      Row() {
        Text("< 返回")
          .fontSize(18)
          .fontColor(Color.White)
          .onClick(() => {
            router.back()
          })
        Blank()
      }
      .width('100%')
      .height(56)
      .padding({ left: 20 })
      .backgroundColor('#1A1A1A')

      // 内容
      Column() {
        Text('✅ 跳转成功！')
          .fontSize(24)
          .fontColor(Color.White)
      }
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

MsgSecondPage.ets（消息二级页）

// ✅ 必须加这一行导入 router
import router from '@ohos.router'

@Entry
@Component
struct MsgSecondPage {
  build() {
    Column() {
      Row() {
        Text("< 返回")
          .fontSize(18)
          .fontColor(Color.White)
          .onClick(() => {
            router.back()
          })
        Blank()
      }
      .width('100%')
      .height(56)
      .padding({ left: 20 })
      .backgroundColor('#1A1A1A')

      Column() {
        Text('✅ 消息详情页跳转成功！')
          .fontSize(24)
          .fontColor(Color.White)
      }
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Blue)
  }
}

如果不需要显示Navigation的title没问题，现在需要显示，在切换tabbar的时候，顶部的标题就不会变，我现在用动态赋值的方法处理了

@Entry
@Component
struct Index {
  private pathStack: NavPathStack = new NavPathStack();
  @State currentIndex: number = 0
  // 1. 定义与 Tab 顺序对应的标题数组
  private readonly tabTitles: string[] = ['首页','消息', '我的']
  private tabsController: TabsController = new TabsController()
  build() {
    Navigation(this.pathStack) {
      Tabs({ barPosition: BarPosition.End ,controller: this.tabsController, index: this.currentIndex}) {
        TabContent() {
          Column() {
            Button('跳转到二级页面')
              .onClick(() => {
                this.pathStack.pushPath({ name: 'PageA' })
              })
          }
        }.tabBar('首页')

        TabContent() {
          Column() {
            Text('消息')
            Image($r('sys.media.ai_recognize'))
              .width(100)
            Button('跳转到消息二级页').onClick((event: ClickEvent) => {
              this.pathStack.pushPath({ name: 'MsgSecondPage' })
            })
          }
        }.tabBar('消息')

        TabContent() {
          Column() {
            Text('我的')
          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Orange)
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
        }
        .tabBar('我的')
      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
    .title(this.tabTitles[this.currentIndex])
    .hideBackButton(true)
    .titleMode(NavigationTitleMode.Mini)

  }
}