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