一、什么是页面路由？
页面路由是指在应用程序中实现不同页面之间的跳转和数据传递。
在ArkUI中所有的页面都是存值页面栈中的：
1）页面栈的最大容量上限为32个页面，使用router.clear()方法可以清空页面栈，释放内存
2）Router有两种页面跳转模式，分别是：
- router.pushUrl（)：目标页不会替换当前页，而是压入页面栈，因此可以用router.back()返回当前页
- router.replaceUrl()：目标页替换当前页，当前页会被销毁并释放资源，无法返回当前页
3）Router有两种页面实例模式，分别是：
- Standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶。默认就是这种模式
- Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同Url页面会被移动到栈顶并重新加载
二、页面路由
实现页面路由需要经过如下几个步骤：
2.1.导入模块
首先要导入Harmony os提供的Router模块：
import router from '@ohos.router'2.2.实现跳转操作
使用router的api实现跳转、返回等操作：
// 跳转到指定路径，并传递参数
router.pushUrl(
{
url: 'pages/ImagePage',
params: {id: 1}
},
router.RouterMode.Single,
err => { // 异常响应回调函数
if(err) {
console.log(`路由失败, errCode: ${err.code}, errMsg: ${err.message}`)
}
}
)参数说明：
- 参数1： RouterOptions
- url：目标跳转页面路径
- params：参数（可选）
- 参数2：页面模式，RouterMode枚举类型。可选：Standard和Single
- 参数3：异常响应回调函数，错误码：
- 100001：内部错误，可能是渲染失败
- 100002：路由地址错误
- 100003：路由栈中页面超过32触发
2.3.参数获取
目标页面获取参数：
// 获取传递过来的参数，使用any类型接收
params: any = router.getParams()
// 获取某一个具体的参数
let courseName = router.getParams()['courseName'] as string
// 返回上一页
router.back()
// 返回到指定页面，并携带参数
router.back(
{
url: 'pages/Index',
params: {id: 10}
}
)页面路径需要在resourcesbase.profile下的main_pages.json文件中进行配置。如下：
{
"src": [
"pages/Index",
"pages/ImagePage"
]
}上面这样配置这样比较麻烦，可以在创建文件的时候，直接创建Page，这样页面路由会自动添加到main_pages.json文件中，如下：
2.4.在页面跳转前弹出alert提示
可以利用提供的接口showAlertBeforeBackPage实现弹出提示，询问是否要页面跳转，在支付取消、资料填入未保存跳转页面的时候，都可以使用
// 返回前的警告提示，点取消则不返回
router.showAlertBeforeBackPage({
message: '确定要返回吗？'
})
// 返回页面
router.back()三、案例演示
实现案例效果如下：
3.1.页面列表
在index.ets中，准备页面列表数组，渲染加载出，点击能够进入对应的页面
import router from '@ohos.router'
class RoutingInfo{
//页面路径
url:string
//页面标题
title:string
constructor(url:string, title:string) {
this.url = url
this.title = title
}
}
@Entry
@Component
struct Index {
private routers:RoutingInfo[] = [
new RoutingInfo("pages/StatusManagement", "任务进度统计"),
new RoutingInfo("pages/ListExample", "商品列表"),
new RoutingInfo("pages/TabsDemo", "消息处理"),
new RoutingInfo("pages/ShowDialogPage", "答题获取积分")
]
build() {
Column(){
Text("页面列表")
.fontSize(40)
.fontWeight(FontWeight.Bold)
.height(90)
List({space:15}){
ForEach(this.routers, (rout:RoutingInfo, index)=>{
ListItem(){
this.RouterItem(rout, index+1)
}
})
}
}
.width("100%")
.height("100%")
}
//自定义页面列表
@Builder RouterItem(rout:RoutingInfo, index:number){
Row(){
Text(`${index}.${rout.title}`)
.fontSize(25)
.fontColor(Color.White)
}
.height(50)
.width("100%")
.justifyContent(FlexAlign.Center)
.borderWidth(2)
.borderRadius(8)
.backgroundColor("#528B8B")
.onClick(()=>{
//router页面跳转,需要设置返回，所以用pushUrl()
router.pushUrl(
{url:rout.url, params:{id:index}},
router.RouterMode.Single, //使用单例模式
err=>{//异常响应回调函数
if(err){//如果有异常打印
console.log(`路由失败，errcode: ${err.code},errMsg:${err.message}`);
}
}
)
})
}
}3.2.页面路径配置
页面路径需要在resources.base.profile.main_pages.json中进行配置。如下：
3.3.修改跳转后的页面
给跳转后的页面添加，头部返回标题组件，这个之前的状态管理章节在CommonComponents.ets中定义了组件TitleBar，直径在页面中导入使用即可，以其中的某个页面为例：
3.4.设置返回和弹窗提示
在TitleBar组件中针对点击的图片触发的事件时候。添加返回和弹窗提示如下：
代码如下：
//自定义标题组件
import router from '@ohos.router';
@Component
export struct TitleBar{
private title:string;
build(){
Row(){
//返回按钮
Image($r("app.media.icon_back_button"))
.width(30)
.onClick(()=>{
//返回前警告
router.showAlertBeforeBackPage({
message:"操作尚未完成，是否放弃操作，返回上一页？"
})
//返回上一页
router.back()
})
//标题
Text(this.title)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()//这里为了有让文字和刷新按钮之间空间，Blank会占满剩余空间
//刷新按钮
Image($r("app.media.icon_refresh_button")).width(30)
}
.width("100%")
.padding(20)
}
}
