小程序路由传参和获取页面栈方法
路由方法
navigateTo,redirectTo只能打开非 tabBar 页面。switchTab只能打开 tabBar 页面。reLaunch可以打开任意页面。- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad中获取。
1. wx.navigateTo
当需要从一个页面跳转到另一个页面，并且希望用户能通过返回按钮返回到前一个页面时使用
wx.navigateTo({url: '/pages/details/details?id=123', // 跳转到指定页面并传递参数success: function(res) {// 成功后的回调console.log('跳转成功');},fail: function(err) {// 失败后的回调console.log('跳转失败', err);}
});
// pages/details/details.js
Page({onLoad: function(options) {console.log(options.id); // 输出：123this.setData({itemId: options.id});},data: {itemId: null}
});
2. wx.redirectTo
当跳转后不希望用户返回到前一个页面时使用，如跳转到登录页后不希望用户返回
wx.redirectTo({url: '/pages/login/login',success: function(res) {console.log('重定向成功');},fail: function(err) {console.log('重定向失败', err);}
});
3. wx.switchTab
当需要切换底部的 tab 页时使用
wx.switchTab({url: '/pages/home/home',success: function(res) {console.log('切换 Tab 成功');},fail: function(err) {console.log('切换 Tab 失败', err);}
});
4. wx.reLaunch
清除整个页面栈并跳转的场景，例如在用户成功登录后，重置应用的导航栈并跳转到首页
wx.reLaunch({url: '/pages/home/home',success: function(res) {console.log('重启应用成功');},fail: function(err) {console.log('重启应用失败', err);}
});
5. wx.navigateBack
返回到前一个或前几个页面，通过 delta 参数可以指定返回的层级数
wx.navigateBack({delta: 1, // 返回上一页面success: function(res) {console.log('返回成功');},fail: function(err) {console.log('返回失败', err);}
});
获取页面栈
wx.getCurrentPages()
假设在一个页面 details 中获取页面栈，bubu获取首页的页面实例栈顶的页面是当前显示的页面
// pages/details/details.js
Page({onLoad: function(options) {const pages = wx.getCurrentPages(); // 获取页面栈console.log(pages); // 输出当前页面栈const currentPage = pages[pages.length - 1]; // 获取当前页面const previousPage = pages[pages.length - 2]; // 获取上一个页面console.log('当前页面:', currentPage.route); // 输出当前页面的路径console.log('上一个页面:', previousPage.route); // 输出上一个页面的路径// 假设我们想在上一个页面上设置一些数据if (previousPage) {previousPage.setData({someData: '来自详情页的数据'});}}
});