鸿蒙：页面路由router的基本使用

注：本文章只是简单概述基本使用，详情请看文档文档中心， 另：官方更推荐Navigation进行跳转。

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

Router适用于模块间与模块内页面切换，通过每个页面的url实现模块间解耦。模块内页面跳转时，为了实现更好的转场动效场景不建议使用该模块，推荐使用Navigation。

1. router.pushUrl

压栈跳转：跳转到应用内的指定页面。页面栈对多是32。

参数1：object：1： url：必填。表示目标页面的url，可以用以下两种格式：- 页面绝对路径，由配置文件中pages列表提供，例如：- pages/index/index- pages/detail/detail- 特殊值，如果url的值是"/"，则跳转到首页。2：params：选填。表示路由跳转时要同时传递到目标页面的数据，切换到其他页面时，当前接收的数据失效。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用。注：params参数不能传递方法和系统接口返回的对象

参数2： 选填：设置为单实例模式还是多实例模式，默认为多实例。Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。Single：单实例模式。如果目标页面的url已经存在于页面栈中，则该url页面移动到栈顶。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

2.router.getLength

获取当前在页面栈内的页面数量。

// -----页面1----------
import { promptAction, router } from '@kit.ArkUI'

@Entry
@Component
struct RouterPage1 {
  @State message: string = ''

  aboutToAppear(): void {
    this.message = JSON.stringify(router.getParams()) || '参数显示位置'
    promptAction.showToast({
      message: router.getLength()
    })
  }

  build() {
    Column() {
      Text('参数：' + this.message)
      Text('页面1')
      Button('压栈跳转--最多32层')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/12/RouterPage2'
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

// -----页面2----------
import { promptAction, router } from '@kit.ArkUI';

@Entry
@Component
struct RouterPage2 {
  @State message: string = 'Hello Router';

  aboutToAppear(): void {
    promptAction.showToast({
      message: router.getLength()
    })
  }

  build() {
    Column() {
      Text('页面2')
      Button('压栈跳转--最多32层')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/12/RouterPage1'
          })
        })

     Button('压栈跳转--单实例跳转')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/12/RouterPage1',
          }, router.RouterMode.Single)
        })

      Button('压栈跳转--带参数')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/12/RouterPage1',
            params: {
              message: this.message
            }
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

3. router.replaceUrl

用应用内的某个页面替换当前页面，并销毁被替换的页面。参数同pushUrl参数相同（销毁当前页面栈页面，替换成新的跳转页面）

 Button('替换跳转--替换当前页面栈').onClick(() => {
        router.replaceUrl({
          url: 'pages/12/RouterPage2',
          params: {
            message: 'hello, ReplaceUrl'
          }
        })
      })

4. router.clear

清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。

router.clear();  

5. router.back

返回上一页面或指定的页面。参数可选，同pushUrl参数相同。

 Button('back 返回页面，无参数').onClick(() => {
        router.back();
      })

      Button('back 返回页面，有参数').onClick(() => {
        router.back({
          url: 'pages/12/RouterPage1',
          params: {
            message: this.message
          }
        });
      })

6. router.getState

获取当前页面的状态信息。

Button('getState--获取当前页面的状态信息。').onClick(() => {
        promptAction.showDialog({
          message: JSON.stringify(router.getState())
        })
      })

7. router.showAlertBeforeBackPage

开启页面返回询问对话框。（就是给个提示，没什么用）

 aboutToAppear(): void {
    router.showAlertBeforeBackPage({
      message: '确定退出吗？'
    })
  }

8.跳转到共享包Har或者Hsp中的页面

8.1: router.pushUrl跳转

 Button('跳转hsp页面').onClick(() => {
        router.pushUrl({
          url: '@bundle:com.example.myapplication/library/ets/pages/Index'
        })
      })

8.2 router.pushNamedRoute跳转

1. 在想要跳转到的共享包Har或者Hsp页面里，给@Entry修饰的自定义组件命名，并将该页面导出

2. 在当前应用包的oh-package.json5文件中配置依赖包

3.在跳转的页面中引入命名路由的页面：

4. 使用router.pushNamedRoute进行跳转，pushNamedRoute同pushUrl一样，也可以传递携带参数到对应页面，在对应页面使用router.getParams()获取参数。