页面路由

2024-02-27 本文已影响0人家乡的蝈蝈

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。
HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

包的引用
import router from '@ohos.router'

1.1、pushUrl-压栈跳转

● pushUrl(options: RouterOptions): Promise<void>
场景：如果我们从列表页跳转到详情页查看详情，点击返回还要继续查看列表页，可以使用pushUrl，打开详情页的同时，保留了列表页在栈中。

import router from '@ohos.router'
@Entry
@Component
struct LwList {
  @State message: string = 'Hello World'
  // 箭头函数简写
  @State list:ListInfo[] = Array.from(Array(10), (_, index:number) => ({title:`我是第${index + 1}`, id:index+1}))
  // list:ListInfo[] = Array.from(Array(10), (_, index:number) => {
  //   return {title:`我是第${index + 1}`, id:index+1}
  // })
  build() {
    Column({space: 20}) {
      Row() {
        Text('列表数据')
          .width('100%')
          .textAlign(TextAlign.Center)
          .height(40)
      }
      .border({
        color: '#f3f4f5',
        width: {
          bottom: 1
        }
      })
      // list渲染数据
      List({space:10}) {
        ForEach(this.list, (item:ListInfo) => {
          ListItem() {
            Row() {
              Text(item.title)
              Button("查看详情")
                .height(30)
                .onClick(() => { 
                  router.pushUrl({url:'pages/06/LwDetail'}) // 压栈路由
                })
            }.padding({
              left:20,
              right:20
            })
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
        })
      }
    }
  }
}
class ListInfo {
  title: string = ""
  id: number = 0
}

1.2、replaceUrl-替换跳转

有一个登录页（Login）和一个个人中心页（Profile），希望从登录页成功登录后，跳转到个人中心页。同时，销毁登录页，在返回时直接退出应用
此时直接replaceUrl方法会在跳转的同时，销毁登录页，在上面的例子中，我们直接将pushUrl换成replaceUrl即可。

 Button("查看详情")
    .onClick(() => {
    router.replaceUrl({url:'pages/06/LwDetail'}) // 压栈路由
 })

总结:

当你需要跳转之后，还可以回到上一个页面，使用pushUrl，它会保留当前的页面，压一个新的页面
当你跳转之后，上一个页面的任务已经完成，不需要返回，就可以使用replaceUrl

1.3、back返回

router.back() . 返回上一个页面，此时不需要参数，如果说你想要返回的时候带一些参数，需要params和url- 想要指定url

Button('返回上一页')
        .onClick(() => {
          // 需要前一个页面通过router.pushUrl过来的页面，才能发挥上一个页面
          router.back()  
        })

1.4、路由参数

如果需要在跳转时，传递一些数据给目标页，比如列表页到详情页，想把id传过去就可以使用路由传参的模式

1.4.1 父组件传参，子组件接收

Button("查看详情")
                .height(30)
                .onClick(() => {
                  router.pushUrl({
                    url:'pages/06/LwDetail',
                    params:{  // 父组件通过params把参数id传给子组件
                      id:item.id
                    }
                  }) // 压栈路由
                })
            }

class RouterParamsClass {
  id:number = 0
}
struct LwDetail {
  @State currentId:number = 0
  aboutToAppear() { // 子组件在初始化通过router.getParams()获取参数，但要指定参数类型
    const params = router.getParams() as RouterParamsClass
    if (params?.id) {
      this.currentId = params.id
    }
  }
}

1.4.2 子组件传参，父组件接收

Button('返回上一页')
        .onClick(() => {
          router.back({
            url:'pages/06/LwList',   // router.back时url必传
            params:{  // router.back时传回父组件的参数
              detailId:Date.now()
            }
          })
        })

class BackParamsClass {
  detailId:number = 0
}
onPageShow() { // 只要页面显示就会执行一次
    const params = router.getParams() as BackParamsClass
    if (params?.detailId) {
      AlertDialog.show({
        message:params?.detailId.toString()
      })
    }
  }

总结：

传参用params对象，里面可以传任意内容，key/value由开发者自己定义
接收端采用router.getParams()获取对象，需要通过class来定义参数的结构，接收之后通过类型断言as指定为具体类型
如果是通过pushUrl的方式跳转的，返回上一个页面时，aboutToAppear不会执行，需要使用onPageShow来监听当前页面的显示钩子函数

1.4、路由模式

● Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。
● Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。
简单理解

Standard-只要你push，页面栈里面就会加一项，不管之前加没加过
Single- 你之前加过，不会加新的页面，会把你之前加过的页面加出来

Button('单例模式跳到列表页')
        .onClick(() => {
          router.pushUrl({
            url:'pages/06/LwList'
          },router.RouterMode.Single) // router.RouterMode.Single会从栈中取出之前加载过的页面，放在栈顶，并重新加载。
        })