005 页面路由-CFANZ编程社区

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

页面跳转

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。

两种跳转模式

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

两种实例模式

同时，Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。
Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。

带参传递

如果需要在跳转时传递一些数据给目标页，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数。在目标页中，可以通过调用Router模块的getParams()方法来获取传递过来的参数。

前期准备

在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。

`import` `router from` `'@ohos.router';`

页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页，这就需要用到数据传递功能。

返回到上一个页面

`router.back();`

返回到指定页面

`router.back({` `url:` `'pages/Home'` `});`

这种方式可以返回到指定页面，需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。

返回到指定页面，并传递自定义参数信息

`router.back({` `url:` `'pages/Home',` `params: {` `info:` `'来自Home页'` `}` `});`

这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

在目标页中，在需要获取参数的位置调用router.getParams()方法即可，例如在onPageShow()生命周期回调中：

`onPageShow() {` `const` `params = router.getParams();` `// 获取传递过来的参数对象` `const` `info = params['info'];` `// 获取info属性的值` `}`

示例

`import` `router from` `'@ohos.router';` `import` `{ DataModel } from` `'../model/DataModelInfo'` `let paramsInfo: DataModel = {` `id:` `123,` `info: {` `index:` `'Index页面'` `}` `};` `@Entry` `@Component` `struct Index {` `@State` `message: string =` `'Hello World'` `build() {` `Row() {` `Column() {` `Button("跳转到IndexTestA界面").onClick(_ => {` `router.pushUrl({` `url:` `'pages/IndexTestA'` `// 目标url` `}, router.RouterMode.Standard, (err) => {` `if` `(err) {` console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`); `return;` `}` `console.info('Invoke pushUrl succeeded.');` `});` `}).margin({ bottom:` `10` `})` `Button("跳转到IndexTestA界面并传递数据").onClick(_ => {` `router.pushUrl({` `url:` `'pages/IndexTestA',` `// 目标url` `params: paramsInfo` `}, router.RouterMode.Standard, (err) => {` `if` `(err) {` console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`); `return;` `}` `console.info('Invoke pushUrl succeeded.');` `});` `}).margin({ bottom:` `10` `})` `Button("跳转到IndexTestA并替换当前界面").onClick(_ => {` `router.replaceUrl({` `url:` `'pages/IndexTestA'` `// 目标url` `}, router.RouterMode.Standard, (err) => {` `if` `(err) {` console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`); `return;` `}` `console.info('Invoke pushUrl succeeded.');` `});` `}).margin({ bottom:` `10` `})` `Button("跳转到IndexTestB界面").onClick(_ => {` `router.pushUrl({` `url:` `'pages/IndexTestB'` `// 目标url` `}, router.RouterMode.Standard, (err) => {` `if` `(err) {` console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`); `return;` `}` `console.info('Invoke pushUrl succeeded.');` `});` `}).margin({ bottom:` `10` `})` `Button("跳转到IndexTestB并替换当前界面").onClick(_ => {` `router.replaceUrl({` `url:` `'pages/IndexTestB'` `// 目标url` `}, router.RouterMode.Standard, (err) => {` `if` `(err) {` console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`); `return;` `}` `console.info('Invoke pushUrl succeeded.');` `});` `})` `}` `.width('100%')` `}` `.height('100%')` `}` `}`

`import` `router from` `'@ohos.router';` `@Entry` `@Component` `struct IndexTestA {` `@State` `message: string =` `'Hello World'` `@State` `sourceData: string =` `''` `build() {` `Row() {` `Column() {` `if` `(this.sourceData !=` `'') {` Text(`来自${`this`.sourceData}的数据`) `}` `Text("IndexTestA").fontSize(20).margin({ bottom:` `10` `})` `Button("返回按钮").onClick(_ => {` `router.back()` `}).margin({ bottom:` `10` `})` `Button("跳转到Index").onClick(_ => {` `router.pushUrl({ url:` `'pages/Index'` `})` `}).margin({ bottom:` `10` `})` `Button("Single方式跳转到Index").onClick(_ => {` `router.pushUrl({ url:` `'pages/Index'` `}, router.RouterMode.Single)` `}).margin({ bottom:` `10` `})` `}.padding(20)` `.width('100%')` `}` `.height('100%')` `}` `onPageShow() {` `const` `params = router.getParams();` `// 获取传递过来的参数对象` `if` `(params==null) {` `return` `}` `if` `(params['info']!=null) {` `console.log('info',"params"+params['id'])` `console.log('info',"params['info'].index"+params['info'].index)` `this.sourceData = params['info'].index;` `// 获取info属性的值` `}` `}` `}`

`import` `router from` `'@ohos.router';` `import` `{ DataModel } from` `'../model/DataModelInfo'` `let paramsInfo: DataModel = {` `id:` `123,` `info: {` `index:` `'IndexTestB页面'` `}` `};` `@Entry` `@Component` `struct IndexTestB {` `@State` `message: string =` `'Hello World'` `build() {` `Row() {` `Column() {` `Text("IndexTestB").fontSize(20).margin({ bottom:` `10` `})` `Button("返回按钮").onClick(_ => {` `router.back()` `}).margin({ bottom:` `10` `})` `Button("返回到指定IndexTestA按钮").onClick(_ => {` `router.back({ url:` `'pages/IndexTestA'` `})` `}).margin({ bottom:` `10` `})` `Button("返回到指定IndexTestA并携带参数").onClick(_ => {` `router.back({ url:` `'pages/IndexTestA', params: paramsInfo });` `}).margin({ bottom:` `10` `})` `Button("跳转到Index").onClick(_ => {` `router.pushUrl({ url:` `'pages/Index'` `})` `}).margin({ bottom:` `10` `})` `Button("Single方式跳转到Index").onClick(_ => {` `router.pushUrl({ url:` `'pages/Index'` `}, router.RouterMode.Single)` `}).margin({ bottom:` `10` `})` `}.padding(20)` `.width('100%')` `}` `.height('100%')` `}` `}`