鸿蒙:路由router传参

新增页面同时会自动注册路由

1，右键新建page

2,填写页面名称，点击完成

3，就会自动注册路由啦

router.pushUrl进行跳转，与vue一样的，这个页面会入栈的。

// 首先引入
import {router} from '@kit.ArkUI'
@Entry
@Component
struct Login {
  build() {
    Column(){
      Text('登录页面')
      Button('登录成功').onClick(()=>{
        // 点击的时候通过router.pushUrl进行跳转，可以返回的哈
        router.pushUrl({
          url:'pages/home'
        })
      })
    }
  }
}

router.replaceUrl与vue一样的，当前这个页面不会入栈的。

// 首先引入
import {router} from '@kit.ArkUI'
@Entry
@Component
struct Login {
  build() {
    Column(){
      Text('登录页面')
      Button('登录成功').onClick(()=>{
        // 点击的时候通过router.pushUrl进行跳转，无法返回跳转前的页面
        router.replaceUrl({
          url:'pages/home'
        })
      })
    }
  }
}

router.back()返回上一个页面

页面栈

页面栈是用来存储程序运行时页面的一种数据结构，遵循先进后出的原则。
鸿蒙中页面栈的最大容量为 32 个页面。

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

// 首先引入
import {router} from '@kit.ArkUI'
@Entry
@Component
struct Home {
  @State message: string = 'Hello World';
  build() {
    Column(){
      Text('首页页面')
      Button('获取页面栈的长度').onClick(()=>{
        AlertDialog.show({
          message:'当前栈的长度'+ router.getLength()
        })
      })
    }
  }
}

router.clear() 清空页面栈

// 首先引入
import {router} from '@kit.ArkUI'
@Entry
@Component
struct Home {
  @State message: string = 'Hello World';
  build() {
    Column(){
      Text('首页页面')
      Button('清空栈').onClick(()=>{
        router.clear()
      }).margin({bottom:10})
      Button('获取页面栈的长度').onClick(()=>{
        AlertDialog.show({
          message:'当前栈的长度'+ router.getLength()
        })
      })
    }
  }
}

2个页面互相跳转

现在有A页面和B页面，让它们互相调转。
如：A-->B-->A--B
现在：router.getLength()的长度是几？
答案：4

路由模式

路由提供了两种不同的跳转模式
1.Standard:无论之前是否添加过，一直添加到页面栈【默认常用】router.RouterMode.Standard
2.Single:如果目标页面已存在，会将已有的最近同url页面移到栈顶【看情况使用】router.RouterMode.Single
在第二个参数设置 【路由模式】
语法：router.pushUrl(options, mode)

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

传递参数

// 首先引入
import {router} from '@kit.ArkUI'
Button('登录成功').onClick(()=>{
        // 点击的时候通过router.pushUrl进行跳转，可以返回的哈
        router.pushUrl({
          url:'pages/home',
          params:{
            userName:'张三',
            id:'20250520'
          }
        })
      })

// 首先引入
import {router} from '@kit.ArkUI'

interface paramsObj{
  name:string
  id:string
}
 Button('获取参数').onClick(()=>{
        const obj = router.getParams() as paramsObj // 这里使用了类型断言
         AlertDialog.show({
           message: '参数' + obj.id
         })
      }).margin({bottom:10})