HarmonyOS 鸿蒙Next：需求 PageA、PageB、PageC页面跳转逻辑 PageA pushUrl 到 PageB，PageB pushUrl 到 PageC，PageC中点击上传按钮直接 replaceUrl 到 PageA，希望回到PageA时

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：需求 PageA、PageB、PageC页面跳转逻辑
PageA pushUrl 到 PageB，PageB pushUrl 到 PageC，PageC中点击上传按钮直接 replaceUrl 到 PageA，希望回到PageA时

需求 PageA、 PageB、 PageC为3个页面  PageA —》pushUrl 到PageB —》pushUrl 到 PageC  PageC中点击上传按钮直接 replaceUrl到 PageA  我希望回到PageA时,点击头部返回按钮可以正常返回出去; 而不是返回到PageB; 该如何处理，点击上传按钮时，将PageB也能从路由栈里面直接清除掉

Harmonyos Next教程
2 回复
您可以参考如下demo使用navigation来实现，看可否满足您的需求

```

//index.ets

[@Entry](/user/Entry)
[@Component](/user/Component)
struct NavigationExample {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    Navigation(this.pageInfos) {
      Column({ space: 12 }) {
        Button($r('app.string.entry_pageA'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            //Push the NavDestination page information specified by name onto the stack, and pass the data as param.
            this.pageInfos.pushPathByName('pageA', null);
          })
      }
      .width($r('app.string.navDestination_width'))
      .height($r('app.string.navDestination_height'))
      .justifyContent(FlexAlign.End)
      .padding({
        bottom: $r('app.string.column_padding'),
        left: $r('app.string.column_padding'),
        right: $r('app.string.column_padding')
      })
    }
    .title($r('app.string.entry_index_title'))
  }
}

```

```

//pageA

import Logger from '../common/utils/Logger';
[@Builder](/user/Builder)
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}
const COLUMN_SPACE: number = 12;
[@Component](/user/Component)
export struct PageOne {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column({ space: COLUMN_SPACE }) {
        Button($r('app.string.entry_index'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            ///清除栈中所有页面
            this.pageInfos.clear();
          })
        Button($r('app.string.entry_pageB'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            this.pageInfos.pushPathByName('pageB', null);
          })
      }
      .width($r('app.string.navDestination_width'))
      .height($r('app.string.navDestination_height'))
      .justifyContent(FlexAlign.End)
      .padding({
        bottom: $r('app.string.column_padding'),
        left: $r('app.string.column_padding'),
        right: $r('app.string.column_padding')
      })
    }
    .title('entry-pageA')
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
      Logger.info(""current page config info is "" + JSON.stringify(context.getConfigInRouteMap()));
    })
  }
}

```

```

//pageB

import Logger from '../common/utils/Logger';
[@Builder](/user/Builder)
export function PageTwoBuilder(name: string, param: Object) {
  PageTwo()
}
const COLUMN_SPACE: number = 12;
[@Component](/user/Component)
export struct PageTwo {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column({ space: COLUMN_SPACE }) {
        Button($r('app.string.entry_index'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            this.pageInfos.clear(); ///清除栈中所有页面
          })
        Button($r('app.string.entry_pageC'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            this.pageInfos.pushPathByName('pageC', null);
          })
      }
      .width($r('app.string.navDestination_width'))
      .height($r('app.string.navDestination_height'))
      .justifyContent(FlexAlign.End)
      .padding({
        bottom: $r('app.string.column_padding'),
        left: $r('app.string.column_padding'),
        right: $r('app.string.column_padding')
      })
    }
    .title('entry-pageB')
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
      Logger.info('current page config info is ' + JSON.stringify(context.getConfigInRouteMap()));
    })
  }
}

```

```

//pageC

import Logger from '../common/utils/Logger';
[@Builder](/user/Builder)
export function PageThreeBuilder(name: string, param: Object) {
  PageThree()
}
const COLUMN_SPACE: number = 12;
[@Component](/user/Component)
export struct PageThree {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column({ space: COLUMN_SPACE }) {
        Button($r('app.string.entry_index'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            this.pageInfos.clear(); //Clear all pages in the stack
          })
        Button($r('app.string.entry_pageA'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            this.pageInfos.popToName('pageA', null);//回退路由栈到由栈底开始第一个名为name的NavDestination页面
          })
        Button($r('app.string.entry_pageB'), { stateEffect: true, type: ButtonType.Capsule })
          .width($r('app.string.button_width'))
          .height($r('app.string.button_height'))
          .onClick(() => {
            this.pageInfos.pushPathByName('pageB', null);
          })
      }
      .width($r('app.string.navDestination_width'))
      .height($r('app.string.navDestination_height'))
      .justifyContent(FlexAlign.End)
      .padding({
        bottom: $r('app.string.column_padding'),
        left: $r('app.string.column_padding'),
        right: $r('app.string.column_padding')
      })
    }
    .title('entry-pageC')
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
      Logger.info('current page config info is ' + JSON.stringify(context.getConfigInRouteMap()));
    })
  }
}

```

在HarmonyOS鸿蒙系统中，页面跳转逻辑可以通过Intent和页面栈管理来实现。针对您提出的需求，PageA、PageB、PageC的页面跳转逻辑可以这样处理：

  1. PageA到PageB的跳转：

    • 在PageA中使用pushUrl方法，并传入PageB的URI或路由信息，实现页面跳转。

  2. PageB到PageC的跳转：

    • 类似地，在PageB中也使用pushUrl方法，传入PageC的URI或路由信息，完成页面跳转。

  3. PageC到PageA的回退：

    • 在PageC中点击上传按钮后，使用replaceUrl方法，并传入PageA的URI或路由信息。replaceUrl会替换当前页面栈中的页面，使得页面栈中只剩下到PageA的路径，从而实现回到PageA时不会保留PageB和PageC的历史记录。

确保每个页面的URI或路由信息正确配置，并在路由表中正确注册。这样，页面之间的跳转逻辑就能按照需求实现。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部