微信小程序——页面路由

官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

API：
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

页面栈

普通的网页在页面跳转时，页面会被刷新；而对于单页面应用，不同页面间的跳转不刷新页面。

小程序的跳转，是不同的机制，采用的是页面栈。

队列可以理解为两头开放的管道；栈则是一头开放一头封死的管道。所以队列是先进先出，而栈是先进后出。

所以在小程序里，不是简单的跳转，不要一直打开新页面，而是使用给定的API管理好页面栈。

页面栈的表现

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

注意事项:

• 使用页面返回到没页面，该页面只会触发onShow，而不会进入onLoad
• navigateTo和redirectTo只能打开非tabBar页面；switchTab只能打开tabBar页面
• reLaunch可以打开任意页面

页面间传参

调用页面路由带的参数可以在目标页面的onLoad中获取。可传多个参数。

参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。如下：

wx.navigateTo({
    url: '/pages/test/test?id=1&name=a'
});

//test.js
Page({
  onLoad: function(option){
    console.log(option) //{id: "1", name: "a"}
  }
})

页面返回

可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。

使用参数delta，定义返回的页面数，如果delta大于现有页面数，则返回到首页。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

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

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

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
    delta: 2
})