HarmonyOS NEXT 实战系列06-路由

举报
yd_234838830 发表于 2025/03/26 14:24:28 2025/03/26
【摘要】 组件导航(Navigation)和页面路由(@ohos.router)均支持应用内的页面跳转,但组件导航支持在组件内部进行跳转,使用更灵活,组件导航具备更强的一次开发多端部署能力,可以进行更加灵活的页面栈操作,同时支持更丰富的动效和生命周期。不过目前初探鸿蒙开发建议先掌握页面路由(@ohos.router)的方案,它更容易手且将来大部分场景式混合使用模式。页面切换:Router 模块通过不同...

image.png

组件导航(Navigation)和页面路由(@ohos.router)均支持应用内的页面跳转,但组件导航支持在组件内部进行跳转,使用更灵活,组件导航具备更强的一次开发多端部署能力,可以进行更加灵活的页面栈操作,同时支持更丰富的动效和生命周期。不过目前初探鸿蒙开发建议先掌握页面路由(@ohos.router)的方案,它更容易手且将来大部分场景式混合使用模式。

页面切换:Router 模块通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。

Router 模块提供了两种跳转模式,分别是 router.pushUrl 和 router.replaceUrl

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

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

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

同时,Router模块提供了两种实例模式,分别是 Standard 和 Single

Standard:多实例模式,也是默认情况下的跳转模式。
Single:单实例模式。如果目标页面的url已经存在于页面栈中,则会将离栈顶最近的同url页面移动到栈顶,该页面成为新建页。

router.pushUrl({ url: 'pages/Profile' }, router.RouterMode.Standard)

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

如果需要在跳转时传递一些数据给目标页面,则可以在调用Router模块的方法时,添加一个params属性,并指定一个对象作为参数。

router.pushUrl({
  url: 'pages/Index',
  params: {
    id: 100,
    title: '标题'
  }
})

interface MyParams {
  id: number
  title: string
}

const params = router.getParams() as MyParams
if (params) {
  console.log('params.id', params.id)
  console.log('params.title', params.title)
}

掌握路由基本知识后,可以完成多页面开发

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。