鸿蒙路由通信(路由跳转/参数传递)

路由通信:

在鸿蒙中路由提供了两种方案:

1、Natigation:这种方案是目前官方推荐我们使用,这种方案涵盖的内容比较多。底部tabbar,顶部菜单,返回等等。集合了页面中各种跳转、返回、菜单等功能。

2、router路由:router里也有类似于以前vue或者react框架中提供的路由对象。在代码中调用它的api来实现路由的跳转、返回、参数的传递。

router路由跳转:

1、pushUrl:代表跳转页面的时候,将老的地址和新的地址都加入到页面执行栈。可以实现跳转后的记录信息,可以返回到指定的页面。

2、replaceUrl:目标页面会替换当前页,并销毁当前页。无法记录历史。无法返回跳转之前。

router的模式:

1、Standard:多实例模式,按照pushUrl来跳转,每次跳转路径都会放在执行栈当中,不会去管执行栈中是否存在同样的路由路径。

2、Single:单实例模式,按照pushUrl来跳转,每次跳转的路径都会在执行栈当中,如果下次访问同一个路径,默认将执行栈中存在的路径放在栈顶。

执行栈当中同样的路径只会存在一次。

跳转的API:

引入我们需要的router对象

import { router } from '@kit.ArkUI'

调用router进行页面跳转

.onClick(()=>{

router.pushUrl({

url:'pages/PageAdd'

})

})

.onClick(()=>{

router.replaceUrl({

url:'pages/PageAdd'

})

})

其中replaceUrl跳转过后无法实现返回到当前页面。

完整的写法:

.onClick(() => {

router.pushUrl({

url: 'pages/PageAdd'

}, router.RouterMode.Standard, (err) => {

if (err) {

console.log('路由跳转失败')

}

})

})

总结:

1、路由跳转过程中,可以只传递第一个参数。里面包含跳转的地址和传递参数。

2、路由跳转过程中,第二个参数可以省略。也可以加上。不写默认就是Standard模式。

3、参数三代表跳转结果。err值决定了是否有错误。

router 路由参数传递:

路由参数传递需要在前一个页面中传递的参数对象。

在后一个页面中接受传递过来的对象。

参数在传递过程中,对于参数类型是默认Object类型,在第二个页面中获取参数的时候,类型推断

只能推断结果为Object类型,造成后续使用的时候,ts无法明确参数格式。

页面一:

params就是路由传递参数的时候,默认属性。内容默认为Object,所以你可以传递任何结果。

.onClick(() => {

router.pushUrl({

url: 'pages/PageAdd',

params:{value:item}

}, router.RouterMode.Standard, (err) => {

if (err) {

console.log('路由跳转失败')

}

})

})

页面二:

获取到参数也默认为object.

获取到的params变量默认为object类型。后续在使用的时候出现类型无法明确,进行报错。

params.value // 报错

为了解决我们路由传递参数的约束问题,我们在viewmodel/paramstyle.ets文件进行约束。其中用到了泛型的概念。

约束我们接受到的结果必须有value属性。

value属性由用户自己来定义。

export class ParamsType<T> {

value:T

constructor(value:T) {

this.value = value

}

}

aboutToAppear(): void {

// 获取到路由传递过来的参数 params获取到的结果,默认类型是object

const params = router.getParams()

console.log(typeof params)

// 告诉我们编辑器,我明确知道params对象数据类型为ParamsType

const taskDetail = (params as ParamsType<TaskModel>).value

console.log(taskDetail.taskName)

}

这段代码采用了工具类约束接受到路由结果。其中用到了类型断言的知识点。

类型断言:我告诉编辑器,我比你更明白我的代码数据类型。不用自己去推断类型。

相关推荐
阿珊和她的猫3 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
一只栖枝5 小时前
华为 HCIE 大数据认证中 Linux 命令行的运用及价值
大数据·linux·运维·华为·华为认证·hcie·it
加班是不可能的,除非双倍日工资7 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi8 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip8 小时前
vite和webpack打包结构控制
前端·javascript
excel9 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国9 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼9 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy9 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
zhanshuo9 小时前
在鸿蒙里优雅地处理网络错误:从 Demo 到实战案例
harmonyos