最近在做小程序的跳转,发现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跳转的区别与应用的更多相关文章

  1. 小程序navigateTo和redirectTo的使用

    最近公司商城项目,有个小问题,就是在商品详情页>购物车页>确认下单页>支付成功和取消支付都会前往订单详情页.当时我没想这么多就全部跳转都用了navigateTo,这样做的话,第一个问 ...

  2. 微信小程序tabBar与redirectTo 或navigateTo冲突

    微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...

  3. 微信小程序 navigateTo 传对象参数

    当微信小程序navigateTo传入参数是个object时,请使用JSON.strtingify将object转化为字符串,代码如下: wx.navigateTo({ url: '../sendChe ...

  4. 图解微信小程序---实现页面的跳转与返回操作

    图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...

  5. 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  6. 微信小程序navigateTo /redirectTo/navigateBack 三者区别

    navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...

  7. 微信小程序页面之间的跳转

    一.使用标签跳转             index.wxml:             在index.wxml页面添加一个<navigator>元素,在元素里面使用属性url就可以 二. ...

  8. 微信小程序插件内页面跳转和参数传递(转)

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  9. 微信小程序插件内页面跳转和参数传递

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

随机推荐

  1. 第三章 存储器的扩展(二)——> 重要

    3.2 主存储器 四.只读存储器(ROM)---->了解(考试也可能会考) 掩膜ROM(MROM) 行列选择线交叉处有 MOS 管为"1" 行列选择线交叉处无 MOS 管为& ...

  2. Spring中ApplicationContextAware接口的用法

    1.为什么使用AppplicationContextAware? ApplicationContext的BeanFactory 的子类, 拥有更强大的功能,ApplicationContext可以在服 ...

  3. java:原子类的CAS

    当一个处理器想要更新某个变量的值时,向总线发出LOCK#信号,此时其他处理器的对该变量的操作请求将被阻塞,发出锁定信号的处理器将独占共享内存,于是更新就是原子性的了. 1.compareAndSet- ...

  4. Nginx解决前端访问资源跨域问题

    被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx ...

  5. HBase 底层原理详解(深度好文,建议收藏)

    HBase简介 HBase 是一个分布式的.面向列的开源数据库.建立在 HDFS 之上.Hbase的名字的来源是 Hadoop database,即 Hadoop 数据库.HBase 的计算和存储能力 ...

  6. Go语言从入门到放弃(四)

    前言 有段时间没摸Go语言了,最近B站的Go语言泄露挺火的. 还差的很远呐 学无止境 本章主要介绍一些零碎的小知识点 变更记录 # 19.4.30  起笔 # 19.4.30  增加代码打包步骤 正文 ...

  7. Centos 7 下的KVM虚拟机

    一 什么是KVM虚拟机: KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中. ...

  8. 十五:SQL注入之oracle,Mangodb注入

    Access,Mysql,mssql,mangoDB,postgresql,sqlite,oracle,sybase JSON类型的数据注入: 键名:键值 {"a":"1 ...

  9. Mysql--由prepared sql statement引发的问题

    问题回顾 最近生产环境数据库查询接口异常,抛出异常信息表明预处理sql语句声明已经超过mysql系统设置限制max_prepared_stmt_count:通过网上一些资料,分析大概是程序中数据库查询 ...

  10. MySQL全面瓦解20:可编程性之流程控制语句

    背景 说到流程控制语句,我们在程序语法中用的比较多,比如C#的if..else...,while...,?: 等.同样的,在MySQL中,也有一些流程控制的语法,方便我们在写函数.存储过程的时候对逻辑 ...