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

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

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

关于router的使用

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

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()方法内的基本参数

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

方式一

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

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

方式二

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

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

页面接受跳转传递的参数

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

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

页面返回及携带参数

返回上一个页面

router.back();

返回指定页面

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

返回并携带参数

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

接收返回的参数

import router from '@ohos.router'
@Entry
@Component
struct Index {
	//定义一个变量来接收返回的参数
  @State src: string = ''

    // 这是一个生命周期，当页面每次显示的时候都会调用
  onPageShow(){
      // 通过拿到 router 中名称为 src 的值
    this.src = router.getParams()?.['src']
  }

  build() {
    Row() {
      Column() {
          // 将返回接收到的值显示
        Text(this.src)
        Button('Next')
          .width("90%")
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Second',
              params: {
                name: 'Index页面传递'
              }
            }, router.RouterMode.Single)
          })
      }
      .width('100%')
    }
    .height('100%').backgroundColor('#efefef')
  }
}

效果

代码

Index页面

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  @State src: string = ''

  onPageShow(){
    this.src = router.getParams()?.['src']
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.src)
        Button('Next')
          .width("90%")
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Second',
              params: {
                name: 'Index页面传递'
              }
            }, router.RouterMode.Single)
          })
      }
      .width('100%')
    }
    .height('100%').backgroundColor('#efefef')
  }
}

Second页面

import router from '@ohos.router'
@Entry
@Component
struct Second {
  @State message: string = 'Hello World'
  @State str: string = router.getParams()?.['name']

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.str)
        Button('back')
          .onClick(() => {
            router.back({
              url: 'pages/Index',
              params: {
                src: 'Second传回来的数据'
              }
            })
          })
          .width("90%")
      }
      .width('100%')
    }
    .height('100%').backgroundColor('#efefef')
  }
}

参考资料

官网文档：

官网视频对应文档

router参考文档

官网视频：

官网对应视频