鸿蒙--页面路由详解router 页面路由指的是在应用程序中实现不同页面之间跳转以及数据的传递，通过Router来实现

router

页面路由

指的是在应用程序中实现不同页面之间跳转以及数据的传递，通过Router来实现

使用Router需要导入一个包import {router } from '@kit.ArkUI'然后才能使用

常见的路由页面跳转方式 pushUrl replaceUrl back

1.pushUrl

从页面a跳转到页面b ， b页面不会替换a页面，而是以压栈的方式，将当前a压入页面栈，这样虽然显示的是b页面，但a页面依然存在，并且可以通过route.back()返回a页面

router.pushUrl通过给定目标页面的url实现跳转

          router.pushUrl({url:'pages/Page01'})

补充`页面栈`

用来存储程序运行时页面的一种数据结构遵循先进后出原则，最大容量是32个页面，可以通过router.getLength()查看页面栈中页面的个数,

图示

页面栈相关api

获取页面栈长度

router.getLength()

获取页面状态

router.getState().index   在页面栈中的位置
router.getState().name    页面名称
router.getState().path    页面路径

清空页面栈

router.clear()

2.replaceUrl

跳转页面的方式，是直接替换，从a页面跳转到b页面，a就会被销毁，是无法通过router.back()返回a页面的

          router.replaceUrl({url:'pages/Page01'})

3.back

返回上一个页面

router.back()

或者给定url

router.back({url:'pages/Page01'})

返回指定页面

传递参数

首先在第一个页面

@State text: string = '页面1'//要传递的数据
router.pushUrl({ url: 'pages/Page01', params: { text: this.text } })

然后在第二个页面接收

这里要注意，接收数据要指定类型

我们要先创建一个新接口

然后使用页面加载是自动调用的函数，来存储值

interface myText {
  text: string
}

@State text: string = ''//空字符串，用来接收

aboutToAppear() {
    const a = router.getParams() as myText
    this.text = a.text
  }

后面就可以正常使用了

演示一下

常见的路由模式

Standard多实例模式

默认的跳转模式，无论栈中是否存在同样url的页面，都会跳转新的页面

大部分页面常用

Single单实例模式

如果栈中已经存在目标页面，则把栈中最靠近栈顶的同url的页面移动到栈顶，如果不存在，则添加新的页面

主要是用在主页面去登录，然后登陆成功后不需要再次返回登录的情况

鸿蒙--页面路由详解