大家好，我是小杨。今天想和大家聊聊小程序开发中每天都要打交道的话题——页面跳转。别看它简单，里面可是有不少门道。记得我刚入门时，就因为在tabBar页面用了普通跳转，调试了半天白屏问题。
经过这些年的实践，我总结出了一套自己的路由跳转心得，今天就毫无保留地分享给大家。
一、基础跳转：从navigator组件开始
我最常用的就是navigator组件，它就像网页里的a标签，用起来特别顺手：
<navigator url="/pages/product/detail?id=123" class="product-card">
<image src="{{productImage}}" mode="aspectFill"/>
<text>{{productName}}</text>
</navigator>
这里有个小技巧：url里的参数我习惯用query字符串的形式传递，这样在目标页面通过onLoad生命周期就能轻松获取：
// pages/product/detail.js
Page({
onLoad: function(options) {
const productId = options.id
this.fetchProductDetail(productId)
},
fetchProductDetail: function(id) {
// 这里写获取商品详情的逻辑
console.log('获取商品ID:', id)
}
})
二、编程式导航：更灵活的跳转方式
有时候需要在JS逻辑里控制跳转，这时候就要用到wx.navigateTo这些API了。我根据使用场景整理了几个核心方法：
// 1. 最常用的跳转 - 保留当前页面
wx.navigateTo({
url: '/pages/order/confirm?from=cart'
})
// 2. 关闭当前页面跳转 - 适合完成页面的场景
wx.redirectTo({
url: '/pages/order/success'
})
// 3. 关闭所有页面跳转 - 比如登录后跳首页
wx.reLaunch({
url: '/pages/index/index'
})
// 4. 切换Tab页 - 特别注意这个只能用于tabBar页面
wx.switchTab({
url: '/pages/cart/index'
})
三、实战中的经验总结
在实际项目中，我养成了几个好习惯：
1. 封装路由工具
为了避免手写url出错，我通常会封装一个路由工具：
// utils/router.js
const routes = {
productDetail: (id) => `/pages/product/detail?id=${id}`,
orderConfirm: (source) => `/pages/order/confirm?from=${source}`,
userProfile: () => '/pages/user/index'
}
export const navigateTo = (path) => {
wx.navigateTo({ url: path })
}
export const router = {
toProductDetail: (id) => navigateTo(routes.productDetail(id)),
toOrderConfirm: (source) => navigateTo(routes.orderConfirm(source))
}
2. 参数处理的坑
传递对象参数时，记得要先序列化：
// 传递对象
const userInfo = { name: '小杨', level: 'VIP' }
wx.navigateTo({
url: `/pages/user/profile?data=${encodeURIComponent(JSON.stringify(userInfo))}`
})
// 接收时
onLoad: function(options) {
if (options.data) {
const userData = JSON.parse(decodeURIComponent(options.data))
this.setData({ userInfo: userData })
}
}
3. 页面栈管理
要特别注意页面栈深度限制（10层），我常用这个API检查：
// 跳转前检查页面栈
const pages = getCurrentPages()
if (pages.length >= 10) {
// 达到限制时用重定向
wx.redirectTo({ url: '/pages/next/page' })
} else {
wx.navigateTo({ url: '/pages/next/page' })
}
四、不同场景的跳转选择
根据我的经验，不同业务场景要选用不同的跳转方式：
- 商品列表 → 详情：用
navigateTo，方便返回 - 登录页 → 首页：用
reLaunch，清空登录流程 - 普通页 → Tab页：必须用
switchTab - 表单提交 → 结果页：用
redirectTo，避免回退到表单
五、一个小彩蛋
分享一个我常用的调试技巧，在app.js里全局监听路由：
// app.js
App({
onShow: function(options) {
console.log('场景值:', options.scene)
console.log('进入路径:', options.path)
console.log('携带参数:', options.query)
}
})
路由跳转虽然基础，但用好了真的能提升用户体验和开发效率。希望我的这些经验对你有帮助！如果你有更好的技巧，欢迎在评论区分享交流～
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群：906392632
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
