如何在 ArkTS 中进行路由导航，实现页面之间的跳转？

HarmonyOS

51CTO技术成就梦想

2025-03-25 17:29:41

浏览

回答 5

待解决

回答 5

按赞同

按时间

珲少

你的问题应该是指的在ArkUI的路由管理吧，可以看下组件导航（Navigation）和页面路由（@ohos.router）相关的。

2025-03-26 09:06:39

全栈若城

参考 router模块

示例代码

// 跳转并传递参数
Button('带参数跳转')
  .onClick(() => {
    router.pushUrl({
      url: 'pages/Page2',
      params: {
        id: 100,
        name: '张三',
        isVIP: true
      }
    })
  })

2025-03-26 09:51:46

Datcon

页面跳转Navigation比Route更好用，官方也更推荐。在API Version 9上，Navigation需要配合NavRouter组件实现页面路由。从API Version 10开始，更推荐使用NavPathStack实现页面路由：

NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为以下三类:

普通跳转，通过页面的name去跳转，并可以携带param。

this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })this.pageStack.pushPathByName("PageOne", "PageOne Param")

带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。

this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) =>  console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))});

带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。

this.pageStack.pushDestination({name: "PageOne", param: "PageOne Param"})  .catch((error: BusinessError) =>    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);  }).then(() =>    console.info('Push destination succeed.');  });this.pageStack.pushDestinationByName("PageOne", "PageOne Param")  .catch((error: BusinessError) =>    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);  }).then(() =>    console.info('Push destination succeed.');  });

页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。

// 返回到上一页this.pageStack.pop()// 返回到上一个PageOne页面this.pageStack.popToName("PageOne")// 返回到索引为1的页面this.pageStack.popToIndex(1)// 返回到根首页（清除栈中所有页面）this.pageStack.clear()

页面替换

NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOnethis.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })this.pageStack.replacePathByName("PageOne", "PageOne Param")// 带错误码的替换，跳转结束会触发异步回调，返回错误码信息this.pageStack.replaceDestination({name: "PageOne", param: "PageOne Param"})  .catch((error: BusinessError) =>    console.error(`Replace destination failed, error code = ${error.code}, error.message = ${error.message}.`);  }).then(() =>    console.info('Replace destination succeed.');  })

页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面this.pageStack.removeByName("PageOne")// 删除指定索引的页面this.pageStack.removeByIndexes([1,3,5])// 删除指定id的页面this.pageStack.removeByNavDestinationId("1");

移动页面

NavPathStack通过Move相关接口去实现移动页面栈中特定页面到栈顶的功能。

// 移动栈中name为PageOne的页面到栈顶this.pageStack.moveToTop("PageOne");// 移动栈中索引为1的页面到栈顶this.pageStack.moveIndexToTop(1);

参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。

// 获取栈中所有页面name集合this.pageStack.getAllPathName()// 获取索引为1的页面参数this.pageStack.getParamByIndex(1)// 获取PageOne页面的参数this.pageStack.getParamByName("PageOne")// 获取PageOne页面的索引集合this.pageStack.getIndexByName("PageOne")

路由拦截

NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象，该对象包含三个回调函数：

名称	描述
willShow	页面跳转前回调，允许操作栈，在当前跳转生效。
didShow	页面跳转后回调，在该回调中操作栈会在下一次跳转生效。
modeChange	Navigation单双栏显示状态发生变更时触发该回调。

说明

无论是哪个回调，在进入回调时页面栈都已经发生了变化。

开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力。

this.pageStack.setInterception({  willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",    operation: NavigationOperation, animated: boolean) => {    if (typeof to === "string") {      console.log("target page is navigation home page.");      return;    }    // 将跳转到PageTwo的路由重定向到PageOne    let target: NavDestinationContext = to as NavDestinationContext;    if (target.pathInfo.name === 'PageTwo') {pathStack.pop();pathStack.pushPathByName('PageOne', null);    }  }})