首先我们先创建一个 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("点击设置")
          }
      }
  }
}

注意到在 2 个根页面Navigation组件中toolbarConfiguration，我们通过 router 进行跳转，而跳转到子页面设置页面时，我们是通过NavPathStack方式。通过这样才实现了两个根页面不会互相干扰。

不幸的是，上面的方法我也是自己根据官方文档大概研究了很长时间摸索出来的方法。幸运的是最终实现了我想要的效果。