微信小程序中使用路由

本章我们主要谈一谈页面之间的路由怎么使用

路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onSHow
打开新页面	调用 API wx.navigateTo 或使用组件	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 或使用组件	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮	onUnload	onShow
Tab 切换	调用 API wx.navigateBack 或使用组件或用户按调用 API wx.switchTab 或使用组件 或用户切换 Tab		各种情况请参考下表
重启动	调用 API wx.reLaunch 或使用组件	onUnload	onLoad, onShow

页面跳转触发的生命周期，其实还是存在问题的，并非官方所说的那样。

SwitchTab的跳转BUG
首页跳转到子页面后，在子页面上使用：

    跳转首页

这种方式有问题，解决的办法是通过JS来实现跳转，代码如下：

             返回主页 
            
跳转成功后，重新调用onload方法，JS代码如下：
backIndex:function(){
    wx.switchTab({
      url: '/pages/index/index',
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })
  }

友情提醒：页面路由的其他基础知识请看官方文档 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

页面栈

页面栈以栈（先进后出）的形式维护页面与页面之间的关系；小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面。
1、使用wx.navigateTo每新开一个页面，页面栈大小加1,直到页面栈大小为5为止；

1.png

2、使用wx.navigateTo重复打开界面

2.png

上图中，假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但两个页面状态是独立的。页面栈大小会加1，如果页面栈大小为5，则wx.navigateTo无效
使用wx.redirectTo重定向

3.png

上图中，假如使用wx.redirectTo从四级页面重定向到二级页面，此时会将关闭四级页面，并使用二级页面替换四级页面，但两个页面状态是独立的。此时的页面栈大小不变，请注意和使用wx.navigateTo的区别。
使用wx.navigateBack返回

4.png

上图中，假如当前页面为五级页面，使用wx.navigateBack：

当delta为1，关闭五级页面，当前页面为四级页面，页面栈大小减1；
当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；
以此类推，直到栈底为止，也就是首页。
以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack页面出入栈操作对页面栈的影响，平时不一定用得上，但是还是有必要了解背后的原理。

通过学习页面栈，你至少可以知道：

小程序运行时你可以获取到已经初始化了的页面的属性和方法
动态获取当前页面路径
页面自动跳转
你可以通过getCurrentPages()获取页面page对象，执行非当前页js里的方法

总结

1、wx.navigateTo会增加页面栈大小，直到页面栈大小为5
2、wx.redirectTo不会增加页面栈大小
3、wx.navigateBack会减少页面栈大小，直到页面栈大小为1

感兴趣的朋友可以去试试。为了更好的服务大家，请加入我们的技术交流群：（511387930），同时您也可以扫描下方的二维码关注我们的公众号，每天我们都会分享经验，谢谢大家。