微信小程序路由跳转两种方式示例解析

下面我将为你详细讲解“微信小程序路由跳转两种方式示例解析”的完整攻略。

一、前言

在微信小程序的开发中，跳转页面是非常常见的操作。本文将介绍微信小程序路由跳转的两种方式，分别是 wx.navigateTo 和 wx.redirectTo。

二、 wx.navigateTo

wx.navigateTo 是保留当前页面，跳转到应用内的某个页面。该跳转方式支持返回上一页操作。

使用方式

wx.navigateTo({
  url: 'pages/index/index'
})

示例

1. 在某个页面的按钮上绑定事件，使用 wx.navigateTo 跳转到另一个页面。

<!-- index 页面 -->
<view>
  <button bindtap="toDetail">跳转到 detail 页面</button>
</view>

// index 页面的 js
Page({
  toDetail() {
    wx.navigateTo({
      url: 'pages/detail/detail'
    })
  }
})

1. 在某个页面的生命周期中使用 wx.navigateTo 跳转到另一个页面。

// index 页面的 js
Page({
  onLoad() {
    wx.navigateTo({
      url: 'pages/detail/detail'
    })
  }
})

三、 wx.redirectTo

wx.redirectTo 是关闭当前页面，跳转到应用内的某个页面。该跳转方式不支持返回上一页操作。

使用方式

wx.redirectTo({
  url: 'pages/index/index'
})

示例

1. 在某个页面的按钮上绑定事件，使用 wx.redirectTo 跳转到另一个页面。

<!-- detail 页面 -->
<view>
  <button bindtap="toIndex">跳转到 index 页面</button>
</view>

// detail 页面的 js
Page({
  toIndex() {
    wx.redirectTo({
      url: 'pages/index/index'
    })
  }
})

1. 在某个页面的生命周期中使用 wx.redirectTo 跳转到另一个页面。

// detail 页面的 js
Page({
  onLoad() {
    wx.redirectTo({
      url: 'pages/index/index'
    })
  }
})

四、总结

本文介绍了微信小程序路由跳转的两种方式：wx.navigateTo 和 wx.redirectTo。wx.navigateTo 用于保留当前页面并跳转至另一个页面，支持返回上一页操作；wx.redirectTo 用于关闭当前页面并跳转至另一个页面，不支持返回上一页操作。在开发中，选择适合的页面跳转方式能够更好地优化用户体验。

以上就是本文的全部内容，希望对你有所帮助。