鸿蒙开发 - 页面路由（页面跳转、返回）

Harmony OS NEXT版本(接口及解决方案兼容API12版本或以上版本)

这篇文章主要介绍一个路由模块 @ohos.router，该模块提供了很多方式进行跳转页面，包括跳转到指定页面、替换当前页面、返回上一页，返回指定页（但官方并不推荐这种方式）

跳转指定页面

pushUrl

这种跳转方式：会保留当前页面，压入页面栈（目标页面会有返回按钮，可以返回上一个页面）

例如从首页 IndexPage 跳转到详情页 DetailPage，如下：

TypeScript 复制代码

import router from '@ohos.router'

router.pushUrl({
  url: 'pages/DetailPage'
})

replaceUrl

这种跳转方式：替换了当前页面，当前页面不会保留，销毁了当前页面

例如从登录页 LoginPage 跳转到首页 IndexPage，如下：

TypeScript 复制代码

import router from '@ohos.router'

router.replaceUrl({
  url: 'pages/IndexPage'
})

带参数的路由跳转

列表页面 ListPage.ets

从列表页 ListPage 跳转到详情页 DetailPage，调用方法时添加一个 params 属性，并传递列表项的 id 和 name 作为参数

TypeScript 复制代码

import router from '@ohos.router'

interface TypeInterface {
  id: number;
  name: string;
}

@Entry
@Component
struct ListPage {
  @State listData: Array<TypeInterface> = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' }
  ]
  
  build() {
    Row() {
      Column() {
        ForEach(this.listData, (item: TypeInterface) => {
          Text(`列表条目：${item.name}`)
            .onClick(() => {
              router.pushUrl({
                url: 'pages/router/DetailPage',
                params: item
              })
            })
        })
      }
    }
  }
}

详情页 DetailPage.ets

详情页使用 router.getParams() 获取列表页传过来的参数

TypeScript 复制代码

import router from '@ohos.router'

interface TypeInterface {
  id: number;
  name: string;
}

@Entry
@Component
struct DetailPage {
  @State itemId: number = 0
  @State itemName: string = ''

  onPageShow() {
    let params = router.getParams() as TypeInterface
    if (params) {
      this.itemId = params.id
      this.itemName = params.name
    }
  }

  build() {
    Row() {
      Column() {
        Text(`详情页 - id：${this.itemId}，name：${this.itemName}`)
      }
    }
  }
}

跳转命名路由页面

比如A页面跳转到B页面，如下：

B页面：

B页面需要使用 routeName 给这个页面命一个名字

TypeScript 复制代码

@Entry({ routeName: 'B' })

A页面：

A页面指定B页面的名字

TypeScript 复制代码

router.pushNameRouter({name: 'B'})

页面返回

js 复制代码

router.back()

返回指定页面

js 复制代码

router.back({
  url: 'pages/home'
})

返回到指定页面，并传递参数

js 复制代码

router.back({
  url: 'pages/home',
  params: {
    id: 1
  }
})

指定页面使用 router.getParams() 获取参数

某些场景

开启页面返回询问对话框

当在某些特殊场景的时候，监听到用户返回上一个页面，会做些提示处理。比如用户到了支付界面，没有支付完成，返回上个页面会进行提示，如下：

TypeScript 复制代码

onBackPress(){
  try {
    router.showAlertBeforeBackPage({
      message: '您还没有完成支付，确定要返回吗？'
    })
  } catch(err){
    console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`)
  }
}

最后

文档地址