小程序navigateTo和redirectTo跳转的区别与应用
最近在做小程序的跳转,发现navigateTo的跳转无法满足业务需求,所以特地记录下
业务需求
类似一个淘宝的在订单界面选择地址的功能,从A页面点击跳转到B页面的地址列表页面,B页面可以选择已有的地址跳转到A也可以选择添加地址跳转到新的新增地址的表单提交页C。在新增完地址点确定按钮返回到地址列表页B,从B中选择企业返回到最初的A页面。
选择地址页面由于很多地方要用到所以考虑把B页面作为一个通用模块页面,其他很多页面在选择地址都进入这个B,最终选择企业再到原页面A,所以B返回A用的是navaigateBack返回上一层。

问题产生与解决
一开始用的都是NavigateTo的跳转方式,后来发现在C页面跳转到B页面时,B页面在选择地址时会返回上一层也就是C,这和事先的需求不一样(选择地址返回到最初的A页面)。这个问题很快就能想到是因为B页面的navaigateBack返回上一层也就是C作为跳转的页面。那么如何既保留navaigateBack的返回上一层又能不跳回C页面呢?
这里就涉及到一个页面堆栈的概念。NavigateTo的方式是将原始页面(跳转前的当前页面)和新页面入栈,在navaigateBack返回是从页面堆栈中查询到路径进行返回。而redirectTo是将原始页面(跳转前的当前页面)进行出栈,也就是说当前页面不放进页面堆栈中,新页面依旧入栈。
那我现在的情景就适合用redirectTo来对C进行跳转,也就是说上图中的2和3的步骤都是用redirectTo来进行跳转,到最后返回到B页面的时候C是不在页面堆栈中的,此时堆栈中的只有A和B,就能通过navaigateBack顺利的返回到A页面了。
总结
redirectTo:当前页面不入栈,新页面入栈
navigateTo:当前页面和新页面入栈
小程序的页面栈最大能存放十个页面,当页面栈中的页面等于10时,在使用navigateTo这种方式是不能再跳页的,页面很多的情况下建议使用navigateTo。
再放张图:

再放一个关于小程序页面跳转的博客链接:https://www.cnblogs.com/bushui/p/11638369.html
小程序navigateTo和redirectTo跳转的区别与应用的更多相关文章
- 小程序navigateTo和redirectTo的使用
最近公司商城项目,有个小问题,就是在商品详情页>购物车页>确认下单页>支付成功和取消支付都会前往订单详情页.当时我没想这么多就全部跳转都用了navigateTo,这样做的话,第一个问 ...
- 微信小程序tabBar与redirectTo 或navigateTo冲突
微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...
- 微信小程序 navigateTo 传对象参数
当微信小程序navigateTo传入参数是个object时,请使用JSON.strtingify将object转化为字符串,代码如下: wx.navigateTo({ url: '../sendChe ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
- 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式
什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...
- 微信小程序navigateTo /redirectTo/navigateBack 三者区别
navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...
- 微信小程序页面之间的跳转
一.使用标签跳转 index.wxml: 在index.wxml页面添加一个<navigator>元素,在元素里面使用属性url就可以 二. ...
- 微信小程序插件内页面跳转和参数传递(转)
在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...
- 微信小程序插件内页面跳转和参数传递
在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...
随机推荐
- Linux设备上没有空间之复盘
某天前端在调接口的时候,发现登录页面得验证码接口居然没有响应数据,显示的是500响应码.于是我一路排查,首先排查验证码接口所属的微服务是否正常,通过lsof -i:服务端口进行排查,发现该微服务进程存 ...
- Linux下使用acme.sh申请和管理Let’s Encrypt证书
关于Let's Encrypt 免费SSL证书 Let's Encrypt 作为一个公共且免费 SSL 的项目逐渐被广大用户传播和使用,是由 Mozilla.Cisco.Akamai.IdenTrus ...
- nacos统一配置中心源码解析
配置文件想必大家都很熟悉,无论什么架构 都离不开配置,虽然spring boot已经大大简化了配置,但如果服务很多 环境也好几个,管理配置起来还是很麻烦,并且每次改完配置都需要重启服务,nacos c ...
- 超有用的linux笔记
名词解释 根目录说明 tree -L 1 . ├── bin -> usr/bin # 英语binary的缩写,表示"二进制文件",bin目录包含了会被所有用户使用的可执行程 ...
- Laya 踩坑日记 ---A* 导航寻路
要做寻路,然后看了看laya 官方的例子,感觉看的一脸懵逼,早了半天的api 也没找到在哪有寻路的,最后一看代码,原来是用的github上的A星方案 https://github.com/bgrin ...
- 【Git】简易使用教程
Git简介 诞生 简单的来说,就是为了托管庞大的Linux源码,开始选择了商用的版本控制系统BitKeeper,但是因为一系列操作,BitKeeper不让用了,所以Linus花了两周时间自己用C写了一 ...
- 关于使用jq跨域请求的实现
今天算是把js跨域请求搞定了,想实现跨越,首先想到的是JSONP,但是具体去做的时候,发现有很多坑.在本地测试好之后又发现目标网站做了https证书认证,也就是实用的jsonp请求地址必须是https ...
- docker 数据卷的挂载和使用
容器之间的数据共享技术, Docker容器产生的数据同步到本地 卷技术 --> 目录挂载, 将容器内的目录挂载到服务器上 使用命令来挂载 -v # 可以挂载多个目录 docker run -it ...
- logging模块简单用法
logging模块功能比较多,但一般情况下使用其简单功能就已经足够了. 最简单的用法如下: import logging logging.baiscConfig(level=logging.DEBUG ...
- 查询数据库v$session时报部分多维元组字元
在查询v$session视图时,出现如下图报错,基本原因是用plsql dev时使用汉字打开新标签,导致v$session action栏位出现乱码 解决方法: select SID,SERIAL#, ...