uniapp 系统学习，从入门到实战（四）—

uniapp 系统学习，从入门到实战（四）—— 页面与路由管理

全篇大概 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);}
}