华为HarmonyOS NEXT 原生应用开发：页面路由、页面和组件生命周期函数

页面路由、组件生命周期

一、路由的基本使用

1. 如何新建页面

直接右键新建Page。【这个是最直接最常用的】

新建普通ets文件，然后通过配置变成页面。【该方法是遇到这种情况的解决方案】

2. 路由 - 页面之间的跳转

使用 **router.pushUrl（{}）**进行跳转

ts 复制代码

import { router } from '@kit.ArkUI'
@Entry
@Component
struct Login {
  build () {
    Column() {
      Text('登录页')
        .fontSize(66)
      // 点击按钮，从登录页跳转到首页
      Button('登录（跳转首页）')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index'
          })
        })
    }
  }
}

使用 router.replaceUrl({}) 进行跳转（该方法不能返回）

ts 复制代码

import { router } from '@kit.ArkUI'
@Entry
@Component
struct Login {
  build () {
    Column() {
      Text('登录页')
        .fontSize(66)
      // 点击按钮，从登录页跳转到首页
      Button('登录（跳转首页）')
        .onClick(() => {
          router.replaceUrl({
            url: 'pages/Index'
          })
        })
    }
  }
}

使用 router.back 进行页面返回

实际开发中，登录成功跳转首页是不能再返回的，这里是示例代码！

ts 复制代码

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('返回登录页面')
        .onClick(() => {
          router.back()  // 需要注意：该方法一般不会和 replaceUrl方法配合使用
        })
    }
  }
}

3. 页面栈

页面栈：就如同弹夹一样，先进后出原则。

router.pushUrl：就像当于是将子弹一直往弹夹里面装，及时返回到栈里面有的页面依旧会累加进栈。
router.replaceUrl: 装一个子弹，打一个子弹，栈里面只会保留当前的页面，所以，router.back方法无法使用。

router.getLength() 获取页面栈长度

ts 复制代码

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('获取页面栈长度')
        .onClick(() => {
          let num: string = router.getLength() // 获取页面栈长度
          console.log('页面栈长度为', num)
        })
    }
  }
}

router.clear() 清空页面栈清空页面栈

ts 复制代码

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('清空页面栈')
        .onClick(() => {
          router.clear() // 清空页面栈
        })
    }
  }
}

4. 路由模式

5. 路由传参

我们在 A 页面跳转到 B 页面的同时，携带 A 页面数据跳转过去，B页面可以去除携带过来的数据包。

第一步：在 A 页面，传递一个 params 对象（将数据打包传递给B）

ts 复制代码

      // 点击按钮，从登录页跳转到首页
      Button('携带参数跳转首页')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index',
            // 数据打包成对象，丢过去！
            params: {
              username: this.username,
              password: this.password
            }
          })
        })

第二步：取出数据包

数据传递过来，需要通过类型断言，并且数据名字保持一致！

ts 复制代码

import { router } from '@kit.ArkUI'

// 创建接口，指定携带过来数据包的类型
interface UserInformation {
  username: string,
  password: string
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('获取A页面传递过来的数据')
        .onClick(() => {
          // 获取数据包，记得类型断言。否则报错
          let getUserData: UserInformation = router.getParams() as UserInformation
          // 输出数据内容
          console.log('数据包内容为：', getUserData.username + '-' + getUserData.username)
        })
    }
  }
}

二、生命周期函数（页面、组件）

1. 页面生命周期函数

2. 组件生命周期函数

需要注意的是， @Entry修饰的是不是也可以使用组件的生命周期函数呀！