微信小程序的页面路由是指在小程序中实现页面之间的跳转。微信小程序提供了几种不同的方式来实现页面路由,包括导航到新页面、重定向、返回上一页等。下面是一些常用的页面路由方法及其使用场景:
1. wx.navigateTo(OBJECT)
用途:用于跳转到应用内的某个页面,但不关闭当前页面。
参数:
- `url`:需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 =相连,不同参数用 `&` 分隔;如 `'path?key=value&key2=value2'`。
- `success`:接口调用成功的回调函数。
-fail:接口调用失败的回调函数。
- `complete`:接口调用结束的回调函数(调用成功、失败都会执行)。
示例代码:
javascript
wx.navigateTo({
url: '/pages/detail/detail?id=123',
success: function(res){
// 成功跳转后的操作
},
fail: function(res) {
// 失败时的操作
},
complete:function(res) {
// 无论成功或失败都会执行的操作
}
})
2.wx.redirectTo(OBJECT)
用途:关闭当前页面,跳转到应用内的某个页面。
-参数:同 wx.navigateTo。
示例代码:
wx.redirectTo({
url: '/pages/list/list'
})
3.wx.switchTab(OBJECT)
- 用途:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
参数:
- `url`:需要跳转的 tabBar 页面的路径(需在 app.json的 `tabBar` 字段定义的页面)。
- `success、fail、complete:同wx.navigateTo`。
示例代码:
wx.switchTab({
url: '/pages/index/index'
})
4. wx.navigateBack(OBJECT)
用途:关闭当前页面,返回上一页面或多级页面。
参数:
-delta:返回的页面数,如果 delta 大于现有打开的页面数,则返回到首页。
- `success、fail、complete:同wx.navigateTo`。
示例代码:
wx.navigateBack({
delta: 1
})
5.wx.reLaunch(OBJECT)
用途:关闭所有页面,打开到应用内的某个页面。
参数:同 wx.navigateTo。
示例代码:
wx.reLaunch({
url: '/pages/home/home'
})
注意事项
- 每次调用 `wx.navigateTo` 后,小程序会将当前页面压入栈中,最多可压入 10 个页面。
- 使用`wx.navigateBack` 可以控制返回的页面层数。
-`wx.switchTab` 只能用于跳转到 tabBar 页面,且会关闭所有非 tabBar 页面。
-`wx.reLaunch` 会关闭所有页面并重新打开指定的页面,适合用于重置整个应用的状态。