鸿蒙Harmony（九）页面路由

介绍

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

• 页面栈的最大容量上限为32个页面，使用router.clear()方法可以清空页面栈，释放内存
• Router有两种页面跳转模式，分别是：
  -router.pushUrl():目标页不会替换当前页，而是压入页面栈，因此可以用router.back返回当前页
  -router.replaceUrl():目标页替换当前页,当前页会被销毁并释放资源，无法返回当前页。

同时，Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。

Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。

使用

在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。

import router from '@ohos.router';

然后利用router实现跳转，返回等操作

  router.pushUrl({
    url: 'pages/Detail' // 目标url
    params: {id:1} // 目标url
  }, router.RouterMode.Standard, (err) => {
    if (err) {
    // 异常相应，错误码： 100001:内部错误，可能是渲染失败。100002:路由地址错误 100003:路由栈页面超过32
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  });

返回操作

// 方式一：返回到上一个页面
router.back()
// 方式二：返回到指定页面。
router.back({
  url: 'pages/Home'
});
//方式三；返回到指定页面，并传递自定义参数信息。
router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});
// 在目标页中，在需要获取参数的位置调用router.getParams()方法即可，例如在onPageShow()生命周期回调中：

onPageShow() {
  const params = router.getParams(); // 获取传递过来的参数对象
  const info = params['info']; // 获取info属性的值
}

示例

页面一

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/RouterDemoPage',
              params: { id: 1, msg: "这是来自第一个页面的信息" }
            }, router.RouterMode.Standard, (err) => {

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

  onPageShow() {
    if (router.getParams() && (router.getParams() as any).msg) {
      this.message = (router.getParams() as any).msg
      console.log(this.message);
    }

  }
}

页面二

跳转需要确保resources目录下的profile下的main_pages.json下有文件配置

{
  "src": [
    "pages/Index",
    "pages/TaskPage",
    "pages/RouterDemoPage"
  ]
}

页面

import router from '@ohos.router'
import { CommonTitleComp } from '../components/CommonTitleComp'

@Entry
@Component
struct RouterDemoPage {
  @State message: string = 'Hello World'
  @State params: any = router.getParams()

  build() {
    Row() {
      Column() {
        CommonTitleComp()
        Text(this.params.msg)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 100 })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }
}

组件CommonTitleComp

import router from '@ohos.router'

@Component
export struct CommonTitleComp {
  @State params: any = router.getParams()

  build() {
    Row() {
      Image($r('app.media.back')).width(30).height(30)
        .margin({ left: 30, right: 10 })
        .onClick(() => {
          router.showAlertBeforeBackPage({
            message: '确定要离开当前页面吗'
          })
          if (this.params && this.params.msg) {
            console.log('2222');
            router.back({
              url: 'pages/Index',
              params: { msg: "这是上个页面的返回信息" }
            })
          } else {
            console.log('1111');
            router.back()
          }
        })
      if (this.params && this.params.id) {
        Text(this.params.id + "标题名称")
          .fontSize(20)
      } else {
        Text("默认标题")
          .fontSize(20)
      }
      Blank()

      Image($r('app.media.apple'))
        .width(30)
        .height(30)
        .borderRadius(30)
        .margin({ right: 20 })
    }.width('100%')
    .height(60)
    .alignItems(VerticalAlign.Center)
  }
}