ArkUI页面路由

一、什么是页面路由？

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递。

在ArkUI中所有的页面都是存值页面栈中的：

1）页面栈的最大容量上限为32个页面，使用router.clear()方法可以清空页面栈，释放内存
2）Router有两种页面跳转模式，分别是：

• router.pushUrl（)：目标页不会替换当前页，而是压入页面栈，因此可以用router.back()返回当前页
• router.replaceUrl()：目标页替换当前页，当前页会被销毁并释放资源，无法返回当前页

3）Router有两种页面实例模式，分别是：

• Standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶。默认就是这种模式
• Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同Url页面会被移动到栈顶并重新加载

二、页面路由

实现页面路由需要经过如下几个步骤：

2.1.导入模块

首先要导入Harmony os提供的Router模块：

import router from '@ohos.router'

2.2.实现跳转操作

使用router的api实现跳转、返回等操作：

// 跳转到指定路径，并传递参数
router.pushUrl(
  {
    url: 'pages/ImagePage',
    params: {id: 1}
  },
  router.RouterMode.Single,
  err => {   // 异常响应回调函数
    if(err) {
      console.log(`路由失败, errCode: ${err.code}, errMsg: ${err.message}`)
    }
  }
)

参数说明：

• 参数1： RouterOptions
  • url：目标跳转页面路径
  • params：参数（可选）
• 参数2：页面模式，RouterMode枚举类型。可选：Standard和Single
• 参数3：异常响应回调函数，错误码：
  • 100001：内部错误，可能是渲染失败
  • 100002：路由地址错误
  • 100003：路由栈中页面超过32触发

2.3.参数获取

目标页面获取参数：

// 获取传递过来的参数，使用any类型接收
params: any = router.getParams()
// 获取某一个具体的参数
let courseName = router.getParams()['courseName'] as string

// 返回上一页
router.back()

// 返回到指定页面，并携带参数
router.back(
  {
    url: 'pages/Index',
    params: {id: 10}
  }
)

页面路径需要在resourcesbase.profile下的main_pages.json文件中进行配置。如下：

{
  "src": [
    "pages/Index",
    "pages/ImagePage"
  ]
}

上面这样配置这样比较麻烦，可以在创建文件的时候，直接创建Page，这样页面路由会自动添加到main_pages.json文件中，如下：

2.4.在页面跳转前弹出alert提示

可以利用提供的接口showAlertBeforeBackPage实现弹出提示，询问是否要页面跳转，在支付取消、资料填入未保存跳转页面的时候，都可以使用

// 返回前的警告提示，点取消则不返回
router.showAlertBeforeBackPage({
  message: '确定要返回吗？'
})

// 返回页面
router.back()

三、案例演示

实现案例效果如下：

3.1.页面列表

在index.ets中，准备页面列表数组，渲染加载出，点击能够进入对应的页面

import router from '@ohos.router'
class RoutingInfo{
  //页面路径
  url:string
  //页面标题
  title:string

  constructor(url:string, title:string) {
    this.url = url
    this.title = title
  }
}

@Entry
@Component
struct Index {

  private routers:RoutingInfo[] = [
    new RoutingInfo("pages/StatusManagement", "任务进度统计"),
    new RoutingInfo("pages/ListExample", "商品列表"),
    new RoutingInfo("pages/TabsDemo", "消息处理"),
    new RoutingInfo("pages/ShowDialogPage", "答题获取积分")
  ]

  build() {
    Column(){
      Text("页面列表")
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .height(90)

      List({space:15}){
        ForEach(this.routers, (rout:RoutingInfo, index)=>{
          ListItem(){
            this.RouterItem(rout, index+1)
          }
        })
      }

    }
    .width("100%")
    .height("100%")
  }

  //自定义页面列表
  @Builder RouterItem(rout:RoutingInfo, index:number){
    Row(){
      Text(`${index}.${rout.title}`)
        .fontSize(25)
        .fontColor(Color.White)
    }
    .height(50)
    .width("100%")
    .justifyContent(FlexAlign.Center)
    .borderWidth(2)
    .borderRadius(8)
    .backgroundColor("#528B8B")
    .onClick(()=>{
      //router页面跳转,需要设置返回，所以用pushUrl()
      router.pushUrl(
        {url:rout.url, params:{id:index}},
        router.RouterMode.Single, //使用单例模式
        err=>{//异常响应回调函数
          if(err){//如果有异常打印
            console.log(`路由失败，errcode: ${err.code},errMsg:${err.message}`);
          }
        }
      )
    })
  }
}

3.2.页面路径配置

页面路径需要在resources.base.profile.main_pages.json中进行配置。如下：

3.3.修改跳转后的页面

给跳转后的页面添加，头部返回标题组件，这个之前的状态管理章节在CommonComponents.ets中定义了组件TitleBar，直径在页面中导入使用即可，以其中的某个页面为例：

3.4.设置返回和弹窗提示

在TitleBar组件中针对点击的图片触发的事件时候。添加返回和弹窗提示如下：

代码如下：

//自定义标题组件
import router from '@ohos.router';
@Component
export struct TitleBar{
  private title:string;

  build(){
    Row(){
      //返回按钮
      Image($r("app.media.icon_back_button"))
        .width(30)
        .onClick(()=>{
          //返回前警告
          router.showAlertBeforeBackPage({
            message:"操作尚未完成，是否放弃操作，返回上一页？"
          })
          //返回上一页
          router.back()
        })

      //标题
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()//这里为了有让文字和刷新按钮之间空间，Blank会占满剩余空间
      //刷新按钮
      Image($r("app.media.icon_refresh_button")).width(30)
    }
    .width("100%")
    .padding(20)
  }
}