全篇大概 2700 字(含代码)，建议阅读时间 20min
在跨平台开发中，高效的路由管理直接影响用户体验和开发效率。本文将深入探讨uniapp的页面创建、路由跳转、参数传递和生命周期管理，助您构建流畅的多端应用。
📚 目录
- 页面创建与配置
- 路由跳转方法大全
- 参数传递与接收技巧
- 页面生命周期深度解析
- 最佳实践与常见问题
1. 页面创建与配置
1.1 创建页面文件
在pages目录下新建.vue文件，建议使用小写字母命名：
detail.vue >> 详情页
index.vue >> 首页
### 1.2 配置pages.json```json{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePullDownRefresh": true}},{"path": "pages/index/detail","style": {"navigationBarTitleText": "详情页"}}]
}
1.3 页面初始化模板
<template><view class="content"><!-- 页面内容 --></view>
</template><script>
export default {data() {return {// 初始化数据}}
}
</script><style>
.content {padding: 20rpx;
}
</style>
2. 路由跳转方法大全
2.1 核心跳转API对比
方法 说明 特点
uni.navigateTo 保留当前页，跳转到新页面 产生页面栈，可返回
uni.redirectTo 关闭当前页，跳转到新页面 不产生新页面栈
uni.reLaunch 关闭所有页面，打开新页面 清空页面栈
uni.switchTab 切换Tab页面 专用于Tab栏页面切换
uni.navigateBack 返回上一页 可指定返回层数
2.2 使用示例
// 保留跳转（可返回）
uni.navigateTo({url: '/pages/index/detail'
});// 替换跳转（不可返回）
uni.redirectTo({url: '/pages/index/detail'
});// 关闭所有页面跳转
uni.reLaunch({url: '/pages/login/index'
});// Tab栏切换
uni.switchTab({url: '/pages/tabbar/home'
});
3. 参数传递与接收技巧
3.1 参数传递方式
// 方式1：URL拼接
uni.navigateTo({url: '/pages/detail?id=123&name=uniap'
});// 方式2：对象参数（自动编码）
uni.navigateTo({url: '/pages/detail',success(res) {res.eventChannel.emit('sendData', {id: 456,title: '动态参数'});}
});
3.2 参数接收处理
export default {onLoad(options) {// URL参数获取console.log('接收参数:', options.id); // EventChannel方式const eventChannel = this.getOpenerEventChannel();eventChannel.on('sendData', data => {console.log('事件参数:', data);});}
}
3.3 注意事项
URL参数长度限制：不同平台不同（建议<1KB）
复杂对象需JSON序列化：
const params = encodeURIComponent(JSON.stringify({a:1, b:2})
);
uni.navigateTo({url: `/pages/detail?params=${params}`
});
4. 页面生命周期深度解析
4.1 生命周期流程图
4.2 核心生命周期方法
| 阶段 | 触发时机 | 开发者操作建议 |
|---|---|---|
| onLoad | 页面首次加载时（接收参数） | 解析路由参数，初始化页面数据 |
| onShow | 页面进入前台时（包括返回） | 刷新动态数据（如用户信息更新） |
| onReady | 页面初次渲染完成 | 操作DOM/调用原生组件API |
| onHide | 页面进入后台时（跳转/切后台） | 保存草稿、暂停动画/音视频 |
| onUnload | 页面销毁时（无法返回） | 清除定时器、取消未完成的网络请求 |
4.3 示例代码
export default {onLoad(options) {console.log('页面加载', options);this.loadData();},onShow() {console.log('页面显示');this.updateBadge();},onReady() {console.log('DOM就绪');this.initMap();},onHide() {console.log('页面隐藏');this.saveDraft();},onUnload() {console.log('页面卸载');clearInterval(this.timer);}
}
5. 最佳实践与常见问题
5.1 路由管理Tips
页面栈限制：小程序平台最多10层
Tab页需在pages.json中预先声明
使用uni.preloadPage预加载提升体验
5.2 常见问题排查
白屏问题：检查页面路径是否正确
参数丢失：确保正确使用encodeURIComponent
生命周期不触发：避免在子组件中使用页面生命周期
5.3 性能优化建议
减少onShow中的复杂逻辑
使用页面预加载技术
合理使用页面卸载时的资源释放
💡 小贴士：使用uni-simple-router插件可轻松实现更复杂的路由管理需求，支持路由守卫、嵌套路由等高级功能。
