微信小程序路由详解

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

路由方式

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

初始化

触发时机：小程序打开的第一个页面

路由后页面：onLoad, onShow

打开新页面

触发时机： 调用 API  wx.navigateTo   使用组件<navigator open-type="navigateTo/>"

路由前页面：onHide

路由后页面：onLoad, onShow

页面重定向

触发时机：调用 API  wx.redirectTo   使用组件<navigator open-type="redirectTo/>"

路由前页面：onUnload

路由后页面：onLoad, onShow

页面返回

触发时机： 调用 API  wx.navigateBack   使用组件<navigator open-type="navigateBack/>"

路由前页面：onUnload

路由后页面：onShow

Tab 切换

触发时机： 调用 API  wx.switchTab   使用组件<navigator open-type="switchTab/>"

路由后页面：各种情况请参考下表

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）

当前页面	路由后页面	触发的生命周期（按顺序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打开）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（从转发进入）	B	D.onUnload(), B.onLoad(), B.onShow()

重启动

触发时机： 调用 API  wx.reLaunch   使用组件<navigator open-type="reLaunch/>"

路由前页面：onUnload

路由后页面：onLoad, onShow

注意事项

• navigateTo, redirectTo只能打开非 tabBar 页面。
• switchTab只能打开 tabBar 页面。
• reLaunch可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

wx.switchTab

功能描述

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.reLaunch

功能描述

关闭所有页面，打开到应用内的某个页面

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.redirectTo

功能描述

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateTo

功能描述

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

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

wx.navigateBack

功能描述

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

参数

Object object

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