美文网首页
小程序路由跳转传值

小程序路由跳转传值

作者: 菜鸟白泽 | 来源:发表于2020-07-21 15:32 被阅读0次

路由跳转的方法


  • wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

  • wx.reLaunch:关闭所有页面,打开到应用内的某个页面

  • wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

  • wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

  • wx.navigateBack:关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

简单说明



(1)wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

image

非 tabBar 页面跳转到 tabbar 页面

首页不是含tabBar 页面,比如登录页,欢迎页,主页含 tabBar 页面。由首页通过wx.redirectTo 跳转到主页时,没有效果。

经测试需要这样:非 tabBar 页面 跳转到 tabBar 页面,必须通过 wx.switchTab 完成,不能用 wx.redirectTo 等其它方式。

(2)wx.reLaunch:关闭所有页面,打开到应用内的某个页面

个人感觉该方法的应用场景如下:

打开多个页面之后,要直接返回首页,此时之前的页面都应该关闭,然后打开首页。

(3)wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

应用场景:从 tabbar 页面跳转到非 tabbar 页面

image
wx.redirectTo,四级页面跳转到二级页面,会关掉四级页面(当前页面),由二级页面替换掉,此时页面栈中有两个二级页面。

(4)wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack可以返回到原页面。小程序中页面栈最多十层

image
使用 wx.navigateTo,打开一个页面就会在页面栈中增加一个页面,不会销毁或关闭,直到打开10个页面。

** 注意**:之前,页面栈最多5层,新的官方文档里说是最多10层,查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

(5)wx.navigateBack:关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages获取当前的页面栈,决定需要返回几层。

image
开始我以为,wx.navigateBack 与 wx.navigateTo 对应,wx.navigateTo 是一个个往页面栈里加,wx.navigateBack 是依次从页面栈中减掉。后来发现 delta 字段,它可以跳着返回。
  • 当delta为1,一级一级跳,页面栈大小减1;

  • 当delta为2,隔着跳,从 A 页面调到 C 页面,中间有 B 页面,A、B都会关闭,页面栈大小减2;

  • 以此类推,直到栈底为止,也就是首页

扩展


  1. wx.redirectTo 和 wx.switchTab 都是先清除栈中当前的页面,然后目标页面进栈,使用这两种跳转方式,都不能通过系统的返回键回到上一个页面,而是直接退出小程序;

  2. 栈底的一级页面,即为首页。

  3. getCurrentPages:https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html

相关文章

  • 路由跳转(非命名路由)

    单纯跳转: 路由传值跳转: 路由传值返回跳转:

  • 小程序路由跳转传值

    路由跳转的方法 wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 wx....

  • ionic4-传递参数

    环境 路由传值 方式一(单个值) 路由定义 跳转 或者 接收 方式二(多个值) 跳转 接收 组件间传值 父 -> ...

  • 2018-09-28

    1.vue 路由跳转传值 -------- 最好用vuex,bus不适合在路由跳转中传值,因为需要初始化组件 2....

  • 微信小程序开发基础(二)

    上一次我们已经讲了,小程序的目录结构、配置以及生命周期函数。今天我们来讲一下微信小程序的路由、事件、和跳转以及传值...

  • 微信小程序的周期解析

    微信小程序中的路由跳转方式(传参)通过navigateTo({})来进行页面的跳转 注意:保留当前页面,跳转到应用...

  • Taro 路由增强 2x 版本来了,可能是最好的 Taro 路由

    小程序的路由有什么问题 路由跳转的页面 url 没有类型提示容易输错 路由传参需要手动拼接参数、无法携带任意类型、...

  • 传值路由

    1、get传值 1.跳转 2.接收 2、动态传值 1.配置路由 { path: 'newscontent/:aid...

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • vue的传值方式

    1.query传值 在某处做路由跳转时,使用query传值的方式: 在页面中接受数据的方式: 2.params传值...

网友评论

      本文标题:小程序路由跳转传值

      本文链接:https://www.haomeiwen.com/subject/adiikktx.html