介绍
页面跳转 是小程序开发最基础、最高频的功能,无论是列表跳详情、登录跳首页、Tab栏切换,都离不开路由导航。很多新手开发经常遇到:
跳转Tab页面失败
页面返回逻辑混乱,页面栈堆积导致闪退
复杂对象参数传递失败、参数丢失
登录页跳转首页后,还能返回登录页的bug
官方文档
小程序页面栈
什么是页面栈?
小程序所有打开过的页面都会存入页面栈(栈结构:先进后出),所有路由跳转本质都是对页面栈的增、删、替换操作。
官方硬性限制:页面栈最大层级为 10层,超过10层无法继续跳转,会直接跳转失败。
页面栈变化对照表
| 路由API | 页面栈变化 | 是否保留当前页 | 是否支持Tab页 | 返回按钮 |
|---|---|---|---|---|
| wx.navigateTo | 新增页面入栈 | 是 | 否 | 有 |
| wx.redirectTo | 替换当前栈顶页面 | 否 | 否 | 有(返回上一页) |
| wx.navigateBack | 关闭栈顶页面,出栈 | 否 | 否 | 手动控制返回层级 |
| wx.switchTab | 清空非Tab页面,切换Tab栈 | 保留Tab页 | 是(仅Tab页) | 无 |
| wx.reLaunch | 清空全部页面栈,重新入栈 | 否 | 是 | 无 |
小程序两种跳转方式
小程序路由分为两大类,开发按需选择:
声明式导航:wxml中使用
<navigator>标签,无需写JS,适合纯点击跳转编程式导航:JS中调用wx路由API,适合跳转前需要做逻辑判断(登录校验、表单验证)的场景