路由基础之Router进阶

在上一篇章中我们了解了Router的一种跳转方式和返回，其中我们了解到pushUrl这种跳转方式必须传递的一个参数是我们需要跳转到的对应页面的url地址。在上一篇章中我们也了解到这种方式是可以进行跨模块转的，也就是

我们可以跳转到其他的模块，这需要我们在url中添加对应的模块和我们这个包的名称，使用示例如下：

[router2.mp4]

https://live.csdn.net/v/470057

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Router1Page {

  build() {
    Column() {
      Button("Router跨模块跳转pushUrl")
        .onClick(() => { router.pushUrl({ url: "@bundle:xxxx.DUIDemo/library/ets/pages/Index" }) })
    }
  }
}

 

@Entry
@Component
struct Index {
  @State message: string = '我是hsp模块的页面';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.message = 'Welcome';
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

其中从第一段代码中我们便可以看出，使用pushUrl这种方式可以进行跨模块跳转，但是需要多传递一些参数，需要传递你这个包的名称和这个包下那个模块。

其中包的名称我们从工程的根目录下的AppScope下的app.json5文件下的bundleName中，这个bundleName就是我们需要传递到@bundle:后的名称， 然后例如我这个目录

我给另外一个模块命名为library所以在包名的后面跟上我们对应的名称便可以，然后我们跳过其中的scr，main，直接从ets这个目录开始传递我们想要跳转页面的路径

这样我们就完成了跨模块的跳转了。

 

接下来我们讲解一下正常跳转中给跳转页面进行传递参数

我们知道pushUrl中有个可选的参数是params ，演示如下

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Router1Page {

  build() {
    Column() {
      Button("Router跨模块跳转pushUrl")
        .onClick(() => {
          router.pushUrl({
            url: "pages/router/Router2Page",
            params: {
              Name: "跳转传参"
            }
          })
        })
    }
  }
}

 

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Router2Page {
  @State params: string = ""

  aboutToAppear(): void {
    this.params = JSON.stringify(router.getParams())
  }

  build() {
    Column() {
      Text(this.params)
        .fontSize(28)
      Button("点击返回")
        .onClick(() => {
          router.back({
            url: "pages/router/Router1Page"
          })
        })
    }
  }
}

从代码块一中我们可以看的出来传递参数就是直接跟在Url的后面，因为它是object类型所以我们要进行Json的解析或者断言成我们传递的类型。

我们在代码块二中，调用aboutToAppear生命周期函数，在里面在调用router.getParams函数获取我们传递过来的参数。

 

Harmony OS  NEXT   API12

本次就暂时介绍这么多， 在下一篇内容中我会给大家介绍一下样式复用的修饰器

谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见