【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（十二）

课程地址：黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发

（本篇笔记对应课程第 19节）

P19《18.ArkUI组件-页面路由》

在这里插入图片描述

以访问京东页面为例，访问过的页面并没有消失，而是进入了页面栈，栈是一个先进后出的结构。访问过的页面会被压入这个栈，当点击返回时会将当前页面弹出页面栈，从而回到上一页面；当不停地访问页面时，页面栈内会被压入很多页面。

在这里插入图片描述

页面路由相关的API：

在这里插入图片描述

试用一下路由：我们在index页面中添加一些路由，让其能够跳转到不同的案例页面。

在index中添加如下代码：一个 RouterInfo类，以及一个 routers 数组：

在这里插入图片描述

将 routes 数组渲染到页面：

在这里插入图片描述

ListItem中通过一个自定义构建函数实现：

在这里插入图片描述

现在开始添加路由跳转功能啦：
首先需要导入 router，写出router后会有导入提示，选择这个提示后会自动导入。

在这里插入图片描述

打开log查看详细错误信息：

在这里插入图片描述

报错的原因是：我们需要在 resources/base/profile 下的 main_pages.json 文件中配置页面信息：

在这里插入图片描述

是不是我们每次创建文件都要配置对应的页面信息？不是的，我们创建的如果是页面文件，则可以选择 new Page，这样创建出来的页面会自动添加到页面配置中去，就不需要手动去添加这个页面的配置了：

在这里插入图片描述

再次测试发现仍然报错“路由失败”，因为我们修改了路由配置页面，重启下预览器，再次测试，可以成功跳转了。

接收路由跳转传递过来的参数：

在这里插入图片描述

router还有一个比较有用的api，返回前的警告：

在这里插入图片描述

总结：

在这里插入图片描述

实践：

// index.ets  首页import router from '@ohos.router'
class RouterInfo {// 页面路径url:string// 页面标题title:stringconstructor(url:string, title:string) {this.url = urlthis.title = title}
}@Extend(Text) function textStyle(){.fontColor('#fff').fontSize(20)
}@Entry
@Component
struct Index {// @State message: string = 'Hello World'@State routers:RouterInfo[] = [new RouterInfo('pages/ImagePage','图片查看'),new RouterInfo('pages/ItemsPage','商品列表'),new RouterInfo('pages/StatePage','Jack的信息'),new RouterInfo('pages/PropPage','任务列表'),]build() {Row() {Column({space:30}) {Text('页面列表').fontSize(32).fontWeight(FontWeight.Bold)List({space:20}){ForEach(this.routers,(item,index)=>{ListItem(){this.routerItem(item,index)}})}}.width('100%').padding(20)}.height('100%')}// 局部自定义构建函数，不需要 function 关键字@Builder routerItem(item:RouterInfo,index){Row(){Text((index+1).toString()).textStyle()Text(item.title).textStyle()}.width('100%').height(40).padding(10).justifyContent(FlexAlign.SpaceBetween).backgroundColor('#36D').borderRadius(20).shadow({radius:8, color:'#4f0000',offsetX:2, offsetY:2}).onClick(()=>{router.pushUrl({url: item.url,params: {id: index}},router.RouterMode.Single,err => {if(err){console.log(`路由失败了！code:${err.code},message:${err.message}`)}})})}
}

// CommonComponents.tes   Header 公共组件import router from '@ohos.router'
@Component
export struct Header{@State params:any = router.getParams()private title:ResourceStrbuild(){Row(){Image($r('app.media.icon_back')).width(40).onClick(()=>{router.showAlertBeforeBackPage({message:'确定返回吗？'})router.back()})if(this.params && this.title){Text(`${this.params.id} . ${this.title}`).fontSize(28)}Blank()Image($r('app.media.icon_search')).width(40)}.width('100%').height(60).padding({left:14, right:14}).justifyContent(FlexAlign.Start)}
}