玩转小程序页面跳转：我的路由实战笔记

大家好，我是小杨。今天想和大家聊聊小程序开发中每天都要打交道的话题------页面跳转。别看它简单，里面可是有不少门道。记得我刚入门时，就因为在tabBar页面用了普通跳转，调试了半天白屏问题。

经过这些年的实践，我总结出了一套自己的路由跳转心得，今天就毫无保留地分享给大家。

一、基础跳转：从navigator组件开始

我最常用的就是navigator组件，它就像网页里的a标签，用起来特别顺手：

html 复制代码

<navigator url="/pages/product/detail?id=123" class="product-card">
  <image src="{{productImage}}" mode="aspectFill"/>
  <text>{{productName}}</text>
</navigator>

这里有个小技巧：url里的参数我习惯用query字符串的形式传递，这样在目标页面通过onLoad生命周期就能轻松获取：

javascript 复制代码

// 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了。我根据使用场景整理了几个核心方法：

javascript 复制代码

// 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出错，我通常会封装一个路由工具：

javascript 复制代码

// 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. 参数处理的坑

传递对象参数时，记得要先序列化：

javascript 复制代码

// 传递对象
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检查：

javascript 复制代码

// 跳转前检查页面栈
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里全局监听路由：

javascript 复制代码

// app.js
App({
  onShow: function(options) {
    console.log('场景值:', options.scene)
    console.log('进入路径:', options.path)
    console.log('携带参数:', options.query)
  }
})

路由跳转虽然基础，但用好了真的能提升用户体验和开发效率。希望我的这些经验对你有帮助！如果你有更好的技巧，欢迎在评论区分享交流～

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！