在上一篇中，我们学习了微信小程序的数据绑定和事件处理，实现了动态交互功能。然而，一个完整的小程序通常由多个页面组成，用户需要在不同页面之间进行跳转。本文将深入探讨微信小程序的页面导航与路由机制，帮助你实现多页面跳转以及页面间的数据传递。
一、页面导航的基本概念
微信小程序的页面导航通过路由机制实现，开发者可以通过代码或组件的方式实现页面跳转。页面导航的核心是wx.navigateTo、wx.redirectTo、wx.switchTab等API，以及
二、页面跳转的几种方式
wx.navigateTo：保留当前页面，跳转到新页面wx.navigateTo是最常用的页面跳转方式，它会保留当前页面，并将新页面压入页面栈中。用户可以通过返回按钮回到上一个页面。示例代码：
wx.navigateTo({
url: '/pages/detail/detail'
})
在app.json中，确保pages/detail/detail页面已经注册：
"pages": [
"pages/index/index",
"pages/detail/detail"
]
wx.redirectTo：关闭当前页面，跳转到新页面wx.redirectTo会关闭当前页面，并跳转到新页面。用户无法通过返回按钮回到上一个页面。示例代码：
wx.redirectTo({
url: '/pages/detail/detail'
})
wx.switchTab：跳转到TabBar页面wx.switchTab用于跳转到TabBar页面，它会关闭所有非TabBar页面。示例代码：
wx.switchTab({
url: '/pages/tab/tab'
})
在app.json中，确保pages/tab/tab页面已经配置为TabBar页面：
"tabBar": {
"list": [
{
"pagePath": "pages/tab/tab",
"text": "Tab页面"
}
]
}
wx.reLaunch：关闭所有页面，跳转到新页面wx.reLaunch会关闭所有页面，并跳转到新页面。示例代码：
wx.reLaunch({
url: '/pages/detail/detail'
})
open-type属性用于指定跳转方式，可选值包括navigate、redirect、switchTab等。
三、页面间数据传递
在实际开发中，页面跳转通常需要传递数据。微信小程序提供了多种方式实现页面间数据传递。
通过URL传递参数在跳转页面时，可以通过URL传递参数。例如：
wx.navigateTo({
url: '/pages/detail/detail?id=123&name=张三'
})
在目标页面（detail.js）中，可以通过onLoad函数的参数获取传递的数据：
Page({
onLoad: function(options) {
console.log('ID:', options.id) // 输出：ID: 123
console.log('Name:', options.name) // 输出：Name: 张三
}
})
通过全局变量传递数据如果数据较为复杂，可以通过全局变量传递。例如，在app.js中定义全局变量：
App({
globalData: {
userInfo: {
id: 123,
name: '张三'
}
}
})
在目标页面中，通过getApp()获取全局变量：
const app = getApp()
Page({
onLoad: function() {
console.log('用户信息:', app.globalData.userInfo)
}
})
通过事件传递数据如果页面跳转是通过组件触发的，可以通过事件传递数据。例如：
在handleTap函数中获取数据：
Page({
handleTap: function(event) {
const id = event.currentTarget.dataset.id
const name = event.currentTarget.dataset.name
wx.navigateTo({
url: `/pages/detail/detail?id=${
id}&name=${
name}`
})
}
})
四、案例：实现一个多页面跳转的小程序
为了巩固页面导航与数据传递的知识，我们将通过一个简单的案例，实现多页面跳转与数据传递。
页面结构在index.wxml文件中，编写以下代码：
在detail.wxml文件中，编写以下代码：
{id}}
{name}}
在about.wxml文件中，编写以下代码：
逻辑处理在index.js文件中，编写以下代码：
Page({
navigateToDetail: function() {
wx.navigateTo({
url: '/pages/detail/detail?id=123&name=张三'
})
}
})
在detail.js文件中，编写以下代码：
Page({
data: {
id: '',
name: ''
},
onLoad: function(options) {
this.setData({
id: options.id,
name: options.name
})
}
})
样式设计在index.wxss、detail.wxss和about.wxss文件中，编写以下代码：
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
margin-top: 20px;
}
预览效果保存文件后，点击“跳转到详情页”按钮，页面会跳转到详情页并显示传递的数据；点击“跳转到关于页”按钮，页面会跳转到关于页。
五、总结与展望
通过本文的学习，你已经掌握了微信小程序的页面导航与路由机制，并实现了多页面跳转与数据传递。页面导航与数据传递是小程序开发中的重要技能，掌握它们将帮助你构建更复杂的应用。
在接下来的文章中，我们将继续深入探讨小程序的更多高级功能，如网络请求、组件封装、数据缓存等，帮助你进一步提升开发技能。敬请期待！
小贴士：在实际开发中，合理设计页面导航与数据传递逻辑可以提升用户体验。建议多尝试不同的跳转方式和数据传递方法，积累经验，逐步提升开发水平。