ArkTS开发系列之导航 (2.5.1 页面路由)

上篇回顾：ArkTS开发系列之气泡(Popup)和菜单(Menu)学习(2.4)

本篇内容： 页面路由的学习

一、知识储备

1. Router页面跳转分为两种router.pushUrl和router.replaceUrl。

• router.puseUrl 是将上个页面压入页面栈，保留原页面数据状态，通过router.back()可以返回上个页面
• router.replaceUrl 则是将上个页面进行替换，并销毁上个页面。无法返回
• router模式
  • 标准实例模式下，router.RouterMode.Standard参数可以省略。
  • 单例模式，router.RouterMode.Single

   router.pushUrl({
      url: 'pages/Theme' // 目标url
    }, router.RouterMode.Single, (err) => { //单例模式，标准实例模式下，router.RouterMode.Standard参数可以省略。
      if (err) {
        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke pushUrl succeeded.');
    });
    ```
  

• 带参数跳转

 router.pushUrl({
    url: 'pages/Detail', // 目标url
    params: paramsInfo // 添加params属性，传递自定义参数
  }, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  })

• 在目标页面获取参数

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

2. 页面返回

• 直接返回

router.back();

• 返回到指定页面

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

• 返回到指定页面，带参数

router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});

• 在目标页面中获取返回时所带参数

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

3. 在页面返回前增加一个询问弹窗

• 系统弹窗

    router.showAlertBeforeBackPage({
      message: '确定要返回吗'
    })

• 自定义弹窗

promptAction.showDialog({
      message: '确认要退出吗',
      buttons: [
        {
          text: '确定',
          color: '#00c250'
        },
        {
          text: '取消',
          color: '#333333'
        }
      ]
    }).then(result => {
      if (result.index == 0) {
        router.back()
      } else {

      }
    }).catch(err => {
      console.error(err.message)
    })

二、效果一览

三、源码剖析

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct MyMenu {
  build() {
    Column() {
      SystemMenu()
      CustomMenu()
    }
  }

  onBackPress() {
    promptAction.showDialog({
      message: '确认要退出吗',
      buttons: [
        {
          text: '确定',
          color: '#00c250'
        },
        {
          text: '取消',
          color: '#333333'
        }
      ]
    }).then(result => {
      if (result.index == 0) {
        router.back()
      } else {

      }
    }).catch(err => {
      console.error(err.message)
    })
  }

  // onBackPress() {
  //   console.error("onBackPress")
  //
  //   router.showAlertBeforeBackPage({
  //     message: '确定要返回吗'
  //   })
  // }