页面跳转和两个页面之间的数据传递-鸿蒙ArkTS

页面跳转和两个页面之间的数据传递-ArkTS

   本篇文章主要是对两个页面之间数据传递进行实现。
  

关于router的利用

页面跳转和参数接受是通过导入 router 模块实现。

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

复制代码

• router.pushUrl() 跳转到指定页面。
  
• router.replaceUrl() 替换当前页面并烧毁。
  
• router.back() 返回上一个页面。
  
• router.getParams() 获取上一个页面跳转过来携带的参数。
  
• router.clear() 清空当前页面栈中全部汗青页面，只会保留当前页面作为栈顶页面。
  
• router.getLength() 获取当前页面栈中的页面数目。
  
• router.getState() 获取当前页面的状态信息。
  
• router.showAlertBeforeBackPage() 开启页面返回询问对话框。
  
• router.hideAlertBeforeBackPage() 禁用页面返回询问对话框。
  

跳转页面的实现方式。

   API9及以上，router.pushUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。
  router.pushUrl()方法内的基本参数

1. router.pushUrl({
2.         // 跳转页面路径
3.         url: '页面',
4.         // 跳转携带的参数
5.         params: {
6.                 变量名：值
7.         }
8. }, 当前模式)

复制代码

方式一
在多实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶近来同url页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，页面栈的元素数目不变；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数目会加1。

1. // params对象内的变量是可以自定义参数名的，任意名称都可以只要在接受的时候通过传递时过来的变量名称就可以的。
2. router.pushUrl({
3. url: 'pages/Second',
4. params: {
5.         name: 'Index页面传递'
6. }
7. }, router.RouterMode.Single)

复制代码

方式二
在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶近来同url页面会被移动到栈顶，替换当前页面，并烧毁被替换的当前页面，移动后的页面为新建页，页面栈的元素数目会减1；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数目不变。

1. // params对象内的变量是可以自定义参数名的，任意名称都可以只要在接受的时候通过传递时过来的变量名称就可以的。
2. router.pushUrl({
3. url: 'pages/Second',
4. params: {
5.         name: 'Index页面传递'
6. }
7. }, router.RouterMode.Standard)

复制代码

页面接受跳转传递的参数

通过 router.getParams() 方法获取页面传递过来的自定义参数。

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct Second {
5.     // 用于接受由页面跳转传递的参数名称
6.   @State str: string = router.getParams()?.['name']
7.         // 页面刷新展示
8.     ....
9.   
10. }

复制代码

页面返回及携带参数

返回上一个页面

1. router.back();

复制代码

返回指定页面

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

复制代码

返回并携带参数

1. // 需要在 router.back() 方法内类似 router.pushUrl() 的用法
2. router.back({
3. url: 'pages/Index',
4. params: {
5.         src: 'Second传回来的数据'
6. }
7. })

复制代码

吸取返回的参数

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct Index {
5.         //定义一个变量来接收返回的参数
6.   @State src: string = ''
8.     // 这是一个生命周期，当页面每次显示的时候都会调用
9.   onPageShow(){
10.       // 通过拿到 router 中名称为 src 的值
11.     this.src = router.getParams()?.['src']
12.   }
14.   build() {
15.     Row() {
16.       Column() {
17.           // 将返回接收到的值显示
18.         Text(this.src)
19.         Button('Next')
20.           .width("90%")
21.           .onClick(() => {
22.             router.pushUrl({
23.               url: 'pages/Second',
24.               params: {
25.                 name: 'Index页面传递'
26.               }
27.             }, router.RouterMode.Single)
28.           })
29.       }
30.       .width('100%')
31.     }
32.     .height('100%').backgroundColor('#efefef')
33.   }
34. }

复制代码

效果

代码

Index页面

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct Index {
5.   @State message: string = 'Hello World'
7.   @State src: string = ''
9.   onPageShow(){
10.     this.src = router.getParams()?.['src']
11.   }
13.   build() {
14.     Row() {
15.       Column() {
16.         Text(this.message)
17.           .fontSize(50)
18.           .fontWeight(FontWeight.Bold)
19.         Text(this.src)
20.         Button('Next')
21.           .width("90%")
22.           .onClick(() => {
23.             router.pushUrl({
24.               url: 'pages/Second',
25.               params: {
26.                 name: 'Index页面传递'
27.               }
28.             }, router.RouterMode.Single)
29.           })
30.       }
31.       .width('100%')
32.     }
33.     .height('100%').backgroundColor('#efefef')
34.   }
35. }

复制代码

Second页面

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct Second {
5.   @State message: string = 'Hello World'
6.   @State str: string = router.getParams()?.['name']
8.   build() {
9.     Row() {
10.       Column() {
11.         Text(this.message)
12.           .fontSize(50)
13.           .fontWeight(FontWeight.Bold)
14.         Text(this.str)
15.         Button('back')
16.           .onClick(() => {
17.             router.back({
18.               url: 'pages/Index',
19.               params: {
20.                 src: 'Second传回来的数据'
21.               }
22.             })
23.           })
24.           .width("90%")
25.       }
26.       .width('100%')
27.     }
28.     .height('100%').backgroundColor('#efefef')
29.   }
30. }

复制代码

参考资料

官网文档：
官网视频对应文档
router参考文档
官网视频：
官网对应视频

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。