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

路由通信:

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

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)

}

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

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

相关推荐
王先生技术栈23 分钟前
思维导图,Android版本实现
java·前端
悠悠:)1 小时前
前端 动图方案
前端
m0_726965981 小时前
Harmony开发【笔记1】报错解决(字段名写错了。。)
笔记·bug·debug·harmonyos
星陈~1 小时前
检测electron打包文件 app.asar
前端·vue.js·electron
Aatroox1 小时前
基于 Nuxt3 + Obsidian 搭建个人博客
前端·node.js
每天都要进步哦1 小时前
Node.js中的fs模块:文件与目录操作(写入、读取、复制、移动、删除、重命名等)
前端·javascript·node.js
brzhang3 小时前
开源了一个 Super Copy Coder ,0 成本实现视觉搞转提示词,效率炸裂
前端·人工智能
diaobusi-883 小时前
HTML5-标签
前端·html·html5
我命由我123453 小时前
CesiumJS 案例 P34:场景视图(3D 视图、2D 视图)
前端·javascript·3d·前端框架·html·html5·js
就是蠢啊3 小时前
封装/前线修饰符/Idea项目结构/package/impore
java·服务器·前端