当前位置：首页 > news >正文

鸿蒙开发-页面跳转

news 来源：原创 2025/5/14 13:19:33

1.路由使用

//1.引入路由
import router from '@ohos.router'

//2.使用跳转

   router.pushUrl({
        url: "pages/Show"
      })

2.页面跳转

import { router } from '@kit.ArkUI';

@Entry
@Component
struct LoginPage {
  @State message: string = '登陆页';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Index'
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

----------------------------调用方法 - 替换跳转（无法返回）------------------
router.replaceUrl({
url:'页面地址'
})
----------------------------调用方法 - 返回（）---------------------------
router.back()

-----------------------------获取页面栈长度------------------------------
router.getLength()
----------------------------清空页面栈-------------------------------------
router.clear()


-----------------------------路由模式------------------------------------
路由 – 4. 路由模式
路由提供了两种不同的跳转模式
1. Standard：无论之前是否添加过，一直添加到页面栈【默认常用】
2. Single：如果目标页面已存在，会将已有的最近同url页面移到栈顶【看情况使用】

   router.pushUrl({
              url: 'pages/DetailPage'
            }, router.RouterMode.Single)

-----------------------------跳转携带参数----------------------
//发送参数
     router.pushUrl({
          url: 'pages/Index',
          params: {
            username: this.username,
            msg: '测试消息'
          }
        })
//接收参数
  // 一进入页面, 就会执行的函数 => 生命周期函数
  aboutToAppear(): void {
    console.log('传递过来的数据', JSON.stringify(router.getParams()))
    const params = router.getParams() as ParamsObj
    this.myName = params.username
  }