微信小程序的路由与页面栈

路由就是根据不同的URL显示不同的内容或者页面，也就是跳转页面。

一、切换路由

  页面大体分为两种，一种是tabbar页面，一种是非tabbar页面。tabbar页面就是在 app.json 的 tabBar 字段定义的页面，每个页面底部会有tabbar，其余都为非tabbar页面。
tabbar 示例：

美团底部tabbar

小程序切换路由的方式有：
（1）wx.switchTab(Object object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
（2）wx.reLaunch(Object object)：关闭所有页面，打开到应用内的某个页面。
（3）wx.redirectTo(Object object)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
（4）wx.navigateTo(Object object)：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
这四种都是页面跳转API，参数有：

属性	类型	默认值	必填项	说明
url	string		是	需要跳转的 tabBar 页面的路径，路径后不能带参数。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）
events (navigateTo)	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。

示例：

wx.redirectTo({
  url: 'test?id=1' //调用页面路由带的参数可以在目标页面的onLoad中获取。
})

（5）wx.navigateBack(Object object)：关闭当前页面，返回上一页面或多级页面。

属性	类型	默认值	必填项	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例：

wx.navigateBack({
  delta: 2
})

二、页面栈

  小程序的页面进行堆栈，以栈的形式维护了当前的所有页面。使用wx.navigateTo()跳转页面的时候保留了当前页面，即页面入栈，使用wx.navigateBack()可回退页面，即页面出栈。小程序中页面栈最多 十层 。
路由和页面栈的联系：

路由方式	触发时机	页面栈表现
初始化	小程序打开的第一个页面	新页面入栈
打开新页面	调用 API wx.navigateTo，使用组件<navigator open-type="navigateTo"/>	新页面入栈
页面重定向	调用 API wx.redirectTo，使用组件 <navigator open-type="redirectTo"/>	当前页面出栈，新页面入栈
页面返回	调用 API wx.navigateBack，使用组件<navigator open-type="navigateBack">，用户按左上角返回按钮	页面不断出栈，直到目标返回页
Tab 切换	调用 API wx.switchTab，使用组件 <navigator open-type="switchTab"/>, 用户切换 Tab	页面全部出栈，只留下新的 Tab 页面
重加载	调用 API wx.reLaunch，使用组件<navigator open-type="reLaunch"/>	页面全部出栈，只留下新的页面

获取当前页面栈：
getCurrentPages();获取当前页面栈，数组中第一个元素为首页，最后一个元素为当前页面。
示例：

var pagesList=getCurrentPages(); //获取到的是一个数组
pagesList[pagesList.length-1];//当前页面（对象）
pagesList[pagesList.length-2];//上一个页面（对象）

注意：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

三、实际应用

（1）在当前页面选择返回上一页面显示选择结果。

<!-- wxml -->
<!-- A页面 -->
<button type="primary" bindtap="toSelect">请选择</button>
<text>您当前选择的是：{{value}}</text>

<!-- B页面 -->
<radio-group class="radio-group" bindchange="radioChange">
    <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
        <text>{{item.value}}</text>
    </radio>
</radio-group>

//js
//A页面
Page({
  data: {
    value:"",
  },
  toSelect(){
    wx.navigateTo({
      url: '/pages/pageB/pageB', //跳转到B页面
    })
  },
})

//B页面
Page({
  data: {
    items: [
      { name: '美国', value: '美国' },
      { name: '中国', value: '中国' },
      { name: '巴西', value: '巴西' },
      { name: '日本', value: '日本' },
      { name: '英国', value: '英国' },
      { name: '法国', value: '法国' },
    ]
  },
  radioChange: function (e) {
    var value = e.detail.value;
    var pagesList=getCurrentPages();
    var prevPage=pagesList[pagesList.length-2];
    prevPage.setData({
      value // 这里是需要传递的参数值
    })
  }
})

(2) 执行上个页面的方法。

var pagesList=getCurrentPages();
var prevPage=pagesList[pagesList.length-2];
prevPage.test(); //test()是上个页面的方法