ArkTS的路由

ArkTS的路由

一、基础使用

这里面的跳转不能用相对路径，直接使用 pages/xxxx

步骤：

1. 建立新页面

2. 引用router组件

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

3. 添加点击事件，注册路由

示例：

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我是首页')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button('跳转登录')
        .onClick(() => {
        // 可返回的跳转，中间有跳转动效
          router.pushUrl({
            url: 'pages/LoginPage'
          })
        // 不可返回式跳转，中间没有过度动效
        // router.replaceUrl({
        //   url: 'pages/Index'
        // })
        })
      Button('跳转详情')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/DetailPage'
          })
        })
      Button('跳转编辑')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/EditPage'
          })
        })

    }
    .height("100%")
    .width("100%")
  }
}

二、页面栈

页面之所以可以来回跳转，就是使用栈的数据结构，所以在多次跳转的时候，要注意页面栈的溢出情况

页面栈的最大容量是32个页面。

下面是有关页面栈的两个操作：

// 获取页面栈的长度，避免溢出
router.getLength()
// 清空页面栈（这种情况，会导致页面无法回退）
router.clear()

三、路由的两种跳转模式

1. Standard：无论之前是否添加过，会一直添加到页面栈（默认常用）
2. Single：如果目标页面存在，会将已有的最近同URl页面移到栈顶（按需使用）

语法：

Button('跳转登录')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/LoginPage'
          }, router.RouterMode.Single)
        })

四、路由传参

当页面发送url请求时，需要带上一定的请求参数时，在 router 里面加上 params对象参数。

步骤：

1. 在需要传递参数的页面，使用 params 传递一个对象

router.pushUrl({
          url: 'pages/Index',
          params: {
            username: this.userName
          }
        })

2. 在需要接受参数的页面接受参数

3. 建立一个生命钩子，在页面刚加载的时候接受参数

  aboutToAppear(): void {
    console.log('传递过来的数据', JSON.stringify(router.getParams()))
    const params = router.getParams() as ParamsObj  // 参数断言，规定类型
    this.myName = params.username
  }

4. 对接受过来的参数进行类型定义，必须手动创建接口，用来识别你的传过来的参数内容，

interface ParamsObj {
  username: string
}

示例：

在登录页面传递 username 到 index 页面

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

@Entry
@Component
struct LoginPage {
  @State message: string = '登录页面';
  @State userName: string = ''

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      TextInput({
        placeholder: '请输入用户名',
        text: $$this.userName
      })

      Button('跳转到首页').onClick(() => {
        router.pushUrl({
          url: 'pages/Index',
          params: {
            username: this.userName
          }
        })
      })
    }
    .height('100%')
    .width('100%')
  }
}

在index页面接受Params

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

interface ParamsObj {
  username: string
}

@Entry
@Component
struct Index {
  //进入页面就执行的钩子函数
  aboutToAppear(): void {
    console.log('传递过来的数据', JSON.stringify(router.getParams()))
    const params = router.getParams() as ParamsObj
    this.myName = params.username
  }

  @State myName: string = ''

  build() {
    Column() {
      Text('我是首页')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text('我的名字是' + this.myName)
        .fontSize(50)
        .fontWeight(FontWeight.Medium)
      Button('跳转登录')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/LoginPage'
          }, router.RouterMode.Single)
        })
      Button('跳转详情')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/DetailPage'
          })
        })
      Button('跳转编辑')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/EditPage'
          })
        })

    }
    .height("100%")
    .width("100%")
  }
}