ArkUI router.back：返回也要管好数据边界

今天我们用 router.back 做一个最普通的页面回退。

页面能打开，也要能离开。很多新手写跳转时只盯着 pushUrl，等页面多了以后才发现返回路径乱了。我们先把普通回退讲清楚。

先跳到练习页

入口页有一个按钮，打开 ArkUIRouterBackTargetDemo。目标页是当前栈顶页面，里面只有说明和一个 back 按钮。

这个 Demo 故意不做复杂业务。先看清楚：pushUrl 压栈，back 离开当前栈顶。

back 不等于业务提交

back() 只负责页面回退。它不会自动保存表单，也不会自动把数据交给上一个页面。

如果你要保存内容、提交请求、二次确认，那些动作要在业务逻辑里明确处理。不要把返回按钮写成“顺手什么都干”的出口。

也要记住页面栈边界

Router 页面栈最多支持 32 个页面。普通回退能让栈往回走，但它不是栈管理的全部能力。

这一篇只讲 back()。返回传值、指定页面回退、清栈，后面需要时再单独写，不要一篇里把栈操作全塞满。

你有没有遇到过“点返回后数据没保存”的页面？通常不是 back 本身错了，而是保存动作和页面回退被混在一起了。

入口页完整代码

@Entry
@Component
struct ArkUIRouterBackDemo {
  private targetUrl: string = 'pages/arkUI/route/ArkUIRouterBackTargetDemo'

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI router.back')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('返回也要管好数据边界')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('back 会离开当前栈顶页面。第一篇先讲最普通的回退，不做返回传值和指定索引回退。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('先跳到一个练习页', '练习页里只有说明和一个 back 按钮。这样我们能看清楚最小闭环。')
        Button('打开返回练习页')
          .fontSize(15)
          .fontColor('#FFFFFF')
          .height(44)
          .borderRadius(22)
          .backgroundColor('#7C3AED')
          .padding({ left: 22, right: 22 })
          .onClick(() => {
            this.getUIContext().getRouter().pushUrl({ url: this.targetUrl })
          })

        this.sectionTitle('返回不是业务提交', '如果要保存表单、上传数据或做二次确认，应该在业务动作里处理清楚，不要把 back 当万能出口。')
        Column({ space: 10 }) {
          Text('本篇只演示普通回退')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
            .width('100%')
          Text('后面如果要讲返回传值、指定页面回退、清栈，再单独拆开写。第一步先别把页面栈玩复杂。')
            .fontSize(14)
            .fontColor('#374151')
            .lineHeight(22)
            .width('100%')
        }
        .width('100%')
        .padding(16)
        .borderRadius(14)
        .backgroundColor('#FFFFFF')
        .border({ width: 1, color: '#E5E7EB' })
        .alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F3F4F6')
  }
}

练习页完整代码

@Entry
@Component
struct ArkUIRouterBackTargetDemo {
  build() {
    Column({ space: 22 }) {
      Column({ space: 8 }) {
        Text('返回练习页')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')
        Text('这里是栈顶页面')
          .fontSize(16)
          .fontColor('#4B5563')
        Text('点下面的按钮，会调用 back 离开当前页面，回到打开它的页面。')
          .fontSize(14)
          .fontColor('#6B7280')
          .lineHeight(22)
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)

      Column({ space: 10 }) {
        Text('返回前先想清楚')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')
          .width('100%')
        Text('普通 back 只负责页面回退。它不替你保存数据，也不自动把结果交给上一个页面。')
          .fontSize(14)
          .fontColor('#374151')
          .lineHeight(22)
          .width('100%')
      }
      .width('100%')
      .padding(16)
      .borderRadius(14)
      .backgroundColor('#FFFFFF')
      .border({ width: 1, color: '#E5E7EB' })
      .alignItems(HorizontalAlign.Start)

      Button('调用 back 回去')
        .fontSize(15)
        .fontColor('#FFFFFF')
        .height(44)
        .borderRadius(22)
        .backgroundColor('#7C3AED')
        .padding({ left: 22, right: 22 })
        .onClick(() => {
          this.getUIContext().getRouter().back()
        })
    }
    .width('100%')
    .height('100%')
    .padding(24)
    .backgroundColor('#F3F4F6')
    .alignItems(HorizontalAlign.Start)
  }
}