微信小程序页面栈

路由方式                                  页面栈
初始化新页面入栈
打开新页面(wx.navigateTo({ url: '/pages/st_suggest/st_suggest' });)新页面入栈
页面重定向 (wx.redirectTo({url:'/pages/home/home'}))当前页面出栈,新页面入栈
页面返回(wx.navigateBack())页面不断出栈,直到目标返回页,新页面入栈
Tab 切换(底部tab切换)页面全部出栈,只留下新的 Tab 页面
重加载页面全部出栈,只留下新的页面

1. wx.navigateTo

页面最多5层,无法深入跳转。比如依次在每个页面调用wx.navigateTo

// 此处是A页面
wx.navigateTo({  // A -> B
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({ // B -> C
  url: 'C?id=2'
})

// 此处是C页面
wx.navigateTo({ // C -> D
  url: 'D?id=3'
})

// 此处是D页面
wx.navigateTo({ // D -> E
  url: 'E?id=4'
})

// 此处是E页面
wx.navigateTo({  // 页面E 不能跳转到 页面F
  url: 'F?id=5'
})

此时想要从页面E跳转到 F ,则不会跳转过去, 
解决方法,使用 wx.redirectTo(OBJECT)方法重定向

// 此处是E页面
// 注意  调用前:此时页面的栈为 A-B-C-D-E
wx.redirectTo({    
  url: 'F?id=5'
})  // 注意  调用后:此时页面的栈为 A-B-C-D-F 

也就是说,重定向操作是页面栈顶出栈替换当前栈顶。 
重定向过去之后假如从页面F跳转到页面G的时候是不是能跳转过去呢?

// 此处是F页面
wx.navigateTo({  // 结果是不行的
  url: 'G?id=6'
})

也是不行的,所以不管怎么,小程序页面栈中最多只能有5个。

那么,还有一种情况:在重定向后的页面F,使用 wx.navigateBack 回退一个页面,继续跳另外一个页面会是神马样子?

// 此处是F页面
// 调用前: A-B-C-D-F
// 调用后: A-B-C-D 页面回退到D
goBack: function (e) { // 
    wx.navigateBack({
      delta: 1 
    })
 }

// 此处是D页面
// 然后页面D调用
wx.navigateTo({  // 可以的
  url: 'E?id=6'
})

答案是可以的:因为wx.navigateBack执行后相当于页面出栈操作;此时页面栈中只有A-B-C-D 四个页面,所有还可以执行入栈(wx.navigateTo)操作

总结:

小程序页面栈最多只能有五层. 
wx.navigateTo 是入栈操作 
wx.navigateBack 是出栈操作 
wx.redirectTo 是替换栈顶操作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值