鸿蒙开发之 ArkUI路由

在这里插入图片描述

1.页面路由

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递
比如说你打开一个app，首先进入的是登陆页，首页，列表搜索页，详情页，你打开几个页面都会存储在页面栈里，页面栈的最大容量上限为32个，使用router.clear()方法可以清空页面栈，释放内存，开发过程中要注意不要等到上限再清除

Router有两种页面跳转模式分别是
router.pushUrl()：目标页不会替换当前页，而是压入页面栈，因此可以用router.back返回当前页比如列表页跳详情页
router.replaceUrl()：目标页替换当前页，当前页会被销毁并释放资源，无法返回当前页比如登陆页

Router有两种页面实例模式，分别是：
standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶，默认就是这种模式
single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同url页面会被移动到栈顶并重新加载

2.使用方法

2.1 导入HarmonyOS提供的Router模块

//固定写法
import router from "@ohos.router";

2.2 使用router

router.pushUrl(
{url:'pages/Imagepage',params:{id:1}
},
router.RouterMode.Single,//页面模式RouterMode枚举
err=>{if(err){//100001:内部错误可能是渲染失败//100002:路由地址错误//100003:路由栈中页面超过32console.log('路由失败')}
}
)//路由取值
params:any=router.getParams()
//返回上一页
router.back()
//返回指定页并携带参数
router.back({url:'page/index',params:{id:10}
})

3.案例

import RouterInfo from '../viewmodel/RouterInfo'
import IndexFontSizePanel from '../views/IndexFontSizePanel'
import RouterItem from '../views/RouterItem'
import PreferencesUtil from '../common/util/PreferencesUtil'const routers: RouterInfo[] = [new RouterInfo('pages/ImagePage', '图片查看案例'),new RouterInfo('pages/ItemPage', '商品列表案例'),new RouterInfo('pages/StatePage', 'Jack和他的女友案例'),new RouterInfo('pages/PropPage', '任务列表案例'),new RouterInfo('pages/AnimationPage', '小鱼动画案例按钮版'),new RouterInfo('pages/AnimationPage2', '小鱼动画案例摇杆版'),new RouterInfo('pages/LifeCirclePage', '生命周期案例1'),new RouterInfo('pages/TestPage1', '生命周期案例2'),new RouterInfo('pages/DocumentListPage', 'UIAbility启动模式案例'),
// new RouterInfo('pages/ShopPage', '查询商铺案例'),
//new RouterInfo('pages/TaskManagePage', '任务列表持久化案例'),
]@Entry
@Component
struct Index {@State message: string = '页面列表'@State showPanel: boolean = false@Provide fontSize: number = 16async aboutToAppear() {this.fontSize = await PreferencesUtil.getPreferenceValue('MyPreferences', 'IndexFontSize', 16) as number}build() {Column() {// 顶部标题this.Title()// 导航列表this.RouterList()// 字体修改面板if (this.showPanel) {IndexFontSizePanel().transition({translate: { y: 115 }})}}.width('100%').height('100%')}@BuilderTitle() {Row() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).height(80)Image($r('app.media.ic_public_settings')).width(30).onClick(() => {animateTo({ duration: 500, curve: Curve.EaseOut }, () => this.showPanel = !this.showPanel)})}.justifyContent(FlexAlign.SpaceAround).width('100%')}@BuilderRouterList() {List({ space: 15 }) {ForEach(routers,(router, index) => {ListItem() {RouterItem({ r: router, i: index + 1 })}})}.layoutWeight(1).alignListItem(ListItemAlign.Center).width('100%')}
}

//RouterItemimport router from '@ohos.router'
import RouterInfo from '../viewmodel/RouterInfo'@Component
export default struct RouterItem{r: RouterInfoi: number@Consume fontSize: numberbuild(){Row(){Text(this.i + '.').fontSize(this.fontSize).fontColor(Color.White)Blank()Text(this.r.title).fontSize(this.fontSize).fontColor(Color.White)}.width('90%').padding(12).backgroundColor('#38f').borderRadius(20).shadow({radius: 6, color: '#4F000000', offsetX: 2, offsetY: 4}).onClick(() => {// router跳转router.pushUrl({url: this.r.url,params: {id: this.i}},router.RouterMode.Single,err => {if(err){console.log(`路由失败，errCode: ${err.code} errMsg:${err.message}`)}})})}
}

//RouterInfo
export default class RouterInfo{// 页面路径url: string// 页面标题title: stringconstructor(url: string, title: string) {this.url = url;this.title = title}
}