HarmonyOS NEXT鸿蒙开发：页面间跳转(页面路由router)

分析

鸿蒙开发中，一个页面跳转到另一个页面，利用 Router 模块，与Vue、React框架有些类似
官网指南
官网API
应用场景

【登录】页面 -> 【首页】页面 -> 【我的】页面
跳转模式

Router模块提供了两种跳转模式：

• router.pushUrl()
  
• router.replaceUrl()
  

router.pushUrl()

目的页不会更换当前页，而是压入页面栈。如允许以保存当前页的状态
可以通过 返回键 大概调用 router.back() 方法返回到当前页
**应用场景：**通用
router.replaceUrl()

目的页会更换当前页，并烧毁当前页。如允许以开释当前页的资源，而且无法返回到当前页。
应用场景： 登录乐成后，跳转到【首页】，利用该方式，点击退却，不会退却到【登录】页面
页面栈的最大容量

页面栈的最大容量为32个页面。假如高出这个限定，可以调用router.clear() 方法清空汗青页面栈，开释内存空间。
导入模块

在利用页面路由Router干系功能之前，须要在代码中先导入Router模块。

1. import router from '@ohos.router';

复制代码

router.pushUrl() 分析

跳转到应用内的指定页面。
api1

1. pushUrl(options: RouterOptions): Promise<void>

复制代码

参数：

• options：RouterOptions范例，必填项，跳转页面形貌信息
  

RouterOptions

路由跳转选项，对象，有以下属性：

• url：string范例，必填，表现目的页面的url，可以用以下两种格式：
  
• 页面绝对路径，由设置文件中pages列表提供，比方：
  
  
  
  • pages/index/index
    
  • pages/detail/detail
    
  
  
• 特别值，假如url的值是"/"，则跳转到首页。
  
• params：object范例，表现路由跳转时要同时转达到目的页面的数据，切换到其他页面时，当前汲取的数据失效。跳转到目的页面后，利用 router.getParams() 获取转达的参数，别的，在类web范式中，参数也可以在页面中直接利用，如this.keyValue(keyValue为跳转时params参数中的key值)，假如目的页面中已有该字段，则其值会被传入的字段值覆盖。
  

案例一

有一个主页（Home）和一个详情页（Detail），盼望从主页点击一个商品，跳转到详情页。同时，须要保存主页在页面栈中，以便返回时规复状态。这种场景下，可以利用pushUrl()方法，而且利用Standard实例模式（大概省略）。

1. // 在Home页面中
2. function onJumpClick(): void {
3.   router.pushUrl({
4.     url: 'pages/Detail' // 目标url
5.   }, router.RouterMode.Standard, (err) => {
6.     if (err) {
7.       console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
8.       return;
9.     }
10.     console.info('Invoke pushUrl succeeded.');
11.   });
12. }

复制代码

例子

1. router.pushUrl({
2.   url: 'pages/routerpage2',
3.   params: {
4.     data1: 'message',
5.     data2: {
6.       data3: [123, 456, 789]
7.     }
8.   }
9. })
10.   .then(() => {
11.     // success
12.   })
13.   .catch(err => {
14.     console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
15.   })

复制代码

api2

1. pushUrl(options: RouterOptions, callback: AsyncCallback<void>): void

复制代码

参数：

• options：RouterOptions范例，必填，跳转页面形貌信息。
  
• callback：AsyncCallback<void> 范例，必填，非常相应回调。
  

例子

1. router.pushUrl({
2.   url: 'pages/routerpage2',
3.   params: {
4.     data1: 'message',
5.     data2: {
6.       data3: [123, 456, 789]
7.     }
8.   }
9. }, (err) => {
10.   if (err) {
11.     console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
12.     return;
13.   }
14.   console.info('pushUrl success');
15. });

复制代码

router.replaceUrl() 分析

用应用内的某个页面更换当前页面，并烧毁被更换的页面。不支持设置页面转场动效，如需设置，保举利用Navigation组件。
api1

1. replaceUrl(options: RouterOptions): Promise<void>

复制代码

参数：

• options：RouterOptions范例，必填，跳转页面形貌信息。
  

例子

1. router.replaceUrl({
2.   url: 'pages/detail',
3.   params: {
4.     data1: 'message'
5.   }
6. })
7.   .then(() => {
8.     // success
9.   })
10.   .catch(err => {
11.     console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
12.   })

复制代码

api2

1. replaceUrl(options: RouterOptions, callback: AsyncCallback<void>): void

复制代码

参数：

• options：RouterOptions范例，必填，跳转页面形貌信息。
  
• callback：AsyncCallback<void> 范例，必填，非常相应回调。
  

例子

1. router.replaceUrl({
2.   url: 'pages/detail',
3.   params: {
4.     data1: 'message'
5.   }
6. }, (err) => {
7.   if (err) {
8.     console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
9.     return;
10.   }
11.   console.info('replaceUrl success');
12. });

复制代码

实例模式

分别是Standard和Single。这两种模式决定了目的url是否会对应多个实例。

• Standard：尺度实例模式，也是默认环境下的实例模式。每次调用该方法都会新建一个目的页，并压入栈顶。
  
• Single：单实例模式。即假如目的页的url在页面栈中已经存在同url页面，则离栈顶迩来的同url页面会被移动到栈顶，并重新加载；假如目的页的url在页面栈中不存在同url页面，则按照尺度模式跳转。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金