在项目中,页面之间的路由跳转是十分普遍的。鸿蒙JS开发提供了四种页面跳转的方式(轻量级智能穿戴仅支持replace()),之前的帖子中也有涉及到一些,本文将详解这四个API并与微信小程序中类似的页面跳转方式做比较。

鸿蒙页面路由需导入router模块。import router from '@system.router';

1、router.push()&wx.navigateTo()

这两个方法都是压栈式跳转,即将跳转到的目标页面“压”在源页面上,源页面不销毁,按返回键即可返回源页面。

router.push()有两个参数,uri指定页面路径,params指定跳转携带参数。在目标页面data中只要有与params中即可接收数据,无需写额外一行代码。

第一页 "push 下一页"按钮点击事件:

    pushNext() {
router.push({
uri: "pages/two/two",
params: {
method: "push"
}
})
},

    data: {
method: "",
count: 0
},
onShow() {
this.count = router.getLength();
},

router.getLength()可获取页面栈中页面数量,鸿蒙页面栈支持最大数值是32。

此时点击设备的返回按钮,即可返回第一页。

第二页 "push 下一页"按钮点击事件:

    pushNext() {
router.push({
uri: "pages/three/three",
params: {
data: {
name: "HarmonyOS",
type: "phone",
method: "push"
}
}
})
},

带复杂参数跳转,也是完全支持的。

微信小程序的wx.navigateTo()方法效果一致,微信小程序中页面跳转的参数在url中携带,和统一资源定位符的规则一致。且支持success,fail,complete回调函数,也支持双向事件的触发。

第一页 "navigateTo 下一页"点击事件:

  naviNext() {
wx.navigateTo({
url: '../two/two?method=navigateTo',
success: res => {
console.log(res)
}
})
},

第二页需在onLoad()中手动接收参数,参数被传递到options对象中。

  onLoad: function (options) {
this.setData({
method: options.method
})
},

如需携带复杂参数,只能通过events参数传递,且只有navigateTo()支持该参数。微信小程序支持页面栈最大页面数为10,该方法不支持跳转到app.json中配置的tabBar页面。

2、router.replace()&wx.redirectTo()

销毁当前页面并跳转页面,源页面在页面栈中被清除。

router.replace()参数和router.push()一致,这里主要看页面栈的页面数。

第一页"replace 下一页"点击事件:

    replaceNext() {
router.replace({
uri: "pages/two/two",
params: {
method: "replace"
}
})
}

第二页"replace 下一页"点击事件:

    replaceNext() {
router.replace({
uri: "pages/three/three",
params: {
data: {
name: "HarmonyOS",
type: "phone",
method: "replace"
}
}
})
}

连续点击replace到第三页,页面栈中页面数始终为1。

此时若点击设备返回键,则是退出APP的效果。

wx.redirectTo()效果类似,左上角返回按钮变为"home"按钮。微信小程序的首页是不会被销毁的,从redirectTo转到的页面点击"home"按钮也可以返回首页。

  rediNext() {
wx.redirectTo({
url: '../two/two?method=redirectTo',
success: res => {
console.log(res)
}
})
},

3、router.back()&wx.navigateBack()

返回上一页的方法,鸿蒙支持传页面path指定返回的页面路径。

第三页"上一页、回首页"点击事件:

    back1() {
router.back();
},
back2() {
router.back({
path: "pages/index/index"
})
},

back()方法会将页面栈中返回目标页面之上的页面全部清除。如页面栈中只有1个页面,back()方法会将APP退出。

微信小程序wx.navigateBack()方法可通过delta参数指定返回几层页面,如果 delta 大于现有页面数,则返回到首页。

  naviBack(){
wx.navigateBack({
success: res => {
console.log(res);
}
})
}, naviIndex(){
wx.navigateBack({
delta: 10,
success: res => {
console.log(res);
}
})
},

如果页面栈中只有1个页面,此方法将无法触发并进入fail回调。但仍可点击小程序左上角"home"按钮返回首页。

4、router.clear()&wx.reLaunch()

router.clear()是清空页面栈中其余页面的方法,仅保留当前页面。

wx.reLaunch()则可以实现清除所有页面,并转到特定页面的方法。小程序首页仍可以通过点击"home"按钮返回。

  relaNext() {
wx.reLaunch({
url: '../three/three?method=reLaunch',
success: res => {
console.log(res)
}
})
},

5、项目实践

欢迎页面跳转到首页,使用replace()。

分类->二级分类->商品列表->商品,使用push()。

商品详情->首页,使用replace()并clear()掉多余页面。

作者:Chris.

想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

从微信小程序到鸿蒙js开发【11】——页面路由的更多相关文章

  1. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

  2. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  3. 从微信小程序到鸿蒙js开发【15】——JS调用Java

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...

  4. 从微信小程序到鸿蒙js开发【04】——list组件

    目录: 1.可滚动区域 2.list + list-item 3.list + list-item-group + list-item 1.可滚动区域 在许多场景中,页面会有一块区域是可滚动的,比如这 ...

  5. 从微信小程序到鸿蒙js开发【06】——swiper&animator&marquee

    目录: 1.swiper轮播图 2.image-animator幻灯片 3.marquee跑马灯 4.nginx动静分离 1.swiper轮播图 微信小程序的swiper组件中只能放置swiper-i ...

  6. 从微信小程序到鸿蒙js开发【08】——表单组件&注册登录模块

    目录: 1.登录模块 2.注册模块 3.系列文章导读 牛年将至,祝大家行行无bug,页页so easy- 在微信小程序中,提供了form组件,可以将input.picker.slider.button ...

  7. 从微信小程序到鸿蒙js开发【05】——tabs组件&每日新闻

    目录: 1.tabs, tab-bar, tab-content 2.tabs的事件处理 3.tabs实现的每日新闻 1.tabs, tab-bar, tab-content 上章说到,鸿蒙的list ...

  8. 微信小程序购物商城系统开发系列-目录结构

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...

  9. 微信小程序购物商城系统开发系列-工具篇

    微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将 ...

随机推荐

  1. Docker安装Mycat并实现mysql读写分离,分库分表

    Docker安装Mycat并实现mysql读写分离,分库分表 一.拉取mycat镜像 二.准备挂载的配置文件 2.1 创建文件夹并添加配置文件 2.1.1 server.xml 2.1.2 serve ...

  2. java身份证号校验

    package com.pt.modules.contract.utils; import java.text.ParseException; import java.text.SimpleDateF ...

  3. go-zero解读与最佳实践(上)

    本文有『Go开源说』第三期 go-zero 直播内容修改整理而成,视频内容较长,拆分成上下篇,本文内容有所删减和重构. 大家好,很高兴来到"GO开源说" 跟大家分享开源项目背后的一 ...

  4. sql如何查询数据库最后10条记录并正序输出

    select * from (select * from 表名 order by 字段 desc limit 10) 临时表 order by 字段

  5. HDU 6762 Mow (2020 Multi-University Training Contest 1 1012) 半平面交

    Mow 题目链接 分析 将多边形的边向内部缩 r 个单位长度,然后这些边所围成的内部区域,就是圆心的合法范围,该范围也是一个多边形,假设面积是\(a\),周长是\(b\),那么可以知道圆可以覆盖的面积 ...

  6. Codeforces Round #655 (Div. 2) B. Omkar and Last Class of Math

    题目链接:https://codeforces.com/contest/1372/problem/B 题意 给出一个正整数 $n$,找到两个正整数 $a,b$ 满足 $a+b = n$ 且 $LCM( ...

  7. python+fiddler下载vip视频 && ts视频可合并

    如果你只想在线看视频可以去看这篇博客:python实现通过指定浏览器免费观看vip视频  先看一下我们程序运行的结果 我们要解析的接口就是(就是这个"接口+视频地址"可以解析出vi ...

  8. python爬取酷我音乐

    我去!!!我之后一定按照搜索方式下载歌曲~~~~~~~~~ 1.首先打开我们本次主讲链接:http://www.kuwo.cn/  2.刚开始我就随便点了一个地方,然后开始在后台找歌曲的链接地址.但是 ...

  9. Codeforces Round #135 (Div. 2) D. Choosing Capital for Treeland

    time limit per test 3 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. Uva 12436 Rip Van Winkle's Code

    Rip Van Winkle was fed up with everything except programming. One day he found a problem whichrequir ...