鸿蒙开发系列教程（十七）--路由Router_鸿蒙 router

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

1、页面跳转

跳转模式

• router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用[router.back()]方法返回到当前页。
• router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

说明:页面栈的最大容量为32个页面。如果超过这个限制，可以调用[router.clear()]方法清空历史页面栈，释放内存空间。

页面实例模式

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

​ 如：有一个设置页（Setting）和一个主题切换页（Theme），希望从设置页点击主题选项，跳转到主题切换页。同时，需要保证每次只有一个主题切换页存在于页面栈中，在返回时直接回到设置页，用single。

导入Router模块

import router from ‘@ohos.router’;

示例1： 由一个页面跳转到另一个页面

新建aaa.etc bbb.etc

配置路由文件resource/base/profile/main_pages.js：

{
  "src": [
    "pages/Index",
    "pages/aaa",
    "pages/bbb"   
  ]
}
1
2
3
4
5
6
7

aaa.etc源代码

import router from '@ohos.router';

@Entry
@Component
struct RouterTest012{
  build() {
    Column() {
      Button() {
        Text('我是主页，点击跳转内页')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }
      .backgroundColor('red')
      .onClick(() => {
         Jumpfun()

      })
    }
  }
}

function Jumpfun(): void {
//router.RouterMode.Standard 可以省略
  router.pushUrl({
    url: 'pages/bbb'
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`错误代码： ${err.code},信息： ${err.message}`);
      return;
    }
    console.info('成功');
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

bbb.etc源代码

@Entry
@Component
struct RouterTest022 {
  build() {
    Column() {
      Text("我是内页")
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

示例2：**从当前页面跳转到另一个页面，同时，销毁当前页面

function Jumpfun(): void {
router.replaceUrl({
url: ‘pages/bbb’
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(错误代码： ${err.code},信息： ${err.message});
return;
}
console.info(‘成功’);
});
}

2、路由参数

如果需要在跳转时传递一些数据给目标页，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数

传递参数

class DataModelInfo {
age: number;
}

class DataModel {
id: number;
info: DataModelInfo;
}

function onJumpClick(): void {
let paramsInfo: DataModel = { id: 123, info: { age: 20 } };

router.pushUrl({
url: ‘pages/Detail’, // 目标url
params: paramsInfo // 添加params属性，传递自定义参数
}, (err) => {。。。})
}

接受参数

在Detail页面，可加到页面生命周期中：

onPageShow() {

​ const params = router.getParams(); // 获取传递过来的参数对象

​ const id = params[‘id’]; // 获取id属性的值

​ const age = params[‘info’].age; // 获取age属性的值

}

3、页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能

1、返回到上一个页面

router.back();

上一个页面必须存在于页面栈中才能够返回，否则该方法将无效。

2、返回到指定页面。

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

3、返回到指定页面，并传递自定义参数信息。

router.back({ url: ‘pages/Home’, params: { info: ‘你好’ }});

参数调用：

onPageShow() {

​ const params = router.getParams(); // 获取传递过来的参数对象

​ const info = params[‘info’]; // 获取info属性的值

}

4、路由提示框

系统默认询问框

Router模块提供的两个方法：[router.showAlertBeforeBackPage()和[router.back()]来实现这个功能

点击“我的内页”，弹出提示框

参考代码：

import router from '@ohos.router';
@Entry
@Component
struct RouterTest022 {
  build() {
    Column() {
      Text("我是内页")
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .onClick(()=>{
          try {
            router.showAlertBeforeBackPage({
              message: '您确定要返回吗？' // 设置询问框的内容
            });
          } catch (err) {
            console.error(`错误 ${err.code}, message is ${err.message}`);
          }

          // 调用router.back()方法，返回上一个页面
          router.back();
        })
    }

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

router.showAlertBeforeBackPage()方法接收一个对象作为参数，该对象包含以下属性：
**message：**string类型，表示询问框的内容。
如果调用成功，则会在目标界面开启页面返回询问框；如果调用失败，则会抛出异常，并通过err.code和err.message获取错误码和错误信息。
当用户点击“返回”按钮时，会弹出确认对话框，询问用户是否确认返回。选择“取消”将停留在当前页目标页；选择“确认”将触发router.back()方法，并根据参数决定如何执行跳转。

自定义询问框

自定义询问框的方式，可以使用弹窗或者[自定义弹窗]实现，提高应用的用户体验度。

调用弹窗的[promptAction.showDialog()]方法

import promptAction from ‘@ohos.promptAction’

参考代码：

import router from '@ohos.router';
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct RouterTest022 {
  build() {
    Column() {
      Text("我是内页")
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .onClick(()=>{         
          // 弹出自定义的询问框
          promptAction.showDialog({
            message: '您确定要返回吗？',
            buttons: [
              {
                text: '取消吧',
                color: '#00FF00'
              },
              {
                text: '确认吧',
                color: '#FF0000'
              }
            ]
          }).then((result) => {
            if (result.index === 0) {
              console.info('用户点击了“取消”按钮');
            } else if (result.index === 1) {

              console.info('用户点击了“确认”按钮');
              // 调用router.back()方法，返回上一个页面
              router.back();
            }
          }).catch((err) => {
            console.error(`错误： ${err.code}, message is ${err.message}`);
          })
        })
    }

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41