微信小程序的N种页面跳转方式（2024最新）_微信小程序页面跳转

微信小程序页面跳转的方式有以下几种：

一、wx.navigateTo（）（入栈）

        （这是最普遍的一种跳转方式，其官方解释为：“保留当前页面，跳转到应用内的某个页面）

        保留当前页面，跳转到应用内的某个页面。会产生缓存页面，缓存足够多时会导致页面卡顿。不建议三次以上跳转使用。类似于html中的 window.location.href=" "。

        在wx.navigateTo中，每跳转一个新的页面，其原始页面就会被加入堆栈，通过调用wx.navigateBack()可通过获取堆栈中保存的页面 返回上一级或多级页面；

        区别：可以携带参数、可以通过方法 wx.navigateBack返回页面、不可跳转tabBar 页面。

        注意：左上角有一个返回箭头，可返回上一个页面，也可以通过方法 wx.navigateBack 返回原页面

二、wx.redirectTo（）（不入栈）

        关闭当前页面，跳转到应用内的某个页面。类似于html中的 window.open('你所要跳转的页面');

        区别：跳转某个页面会刷新重新打开、不能返回上一页面、不可以跳转tabBar 页面、可以携带参数。

        注意：左上角没有返回箭头，不能返回上一个页面

三、wx.switchTab（）

      （wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面）

        跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

        区别：只能跳转tabBar 页面、不可携带参数。

四、wx.reLaunch（）

        关闭所有页面，打开到应用内的某个页面。会清空当前的堆栈。

        区别：可以跳转任意页面，包含tabBar 页面。可携带参数

        注意：①跟wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同；

                   ②这里要提到小程序中的 getCurrentPages() 方法；

                   ③在wx.navigateTo中，每跳转一个新的页面，其原始页面就会被加入堆栈，通过调用                         wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面；

                   ④wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返                         回之前堆栈中的页面；

                   ⑤wx.reLaunch 方法则会清空当前的堆栈。

五、<navigator></navigator>标签

        用标签包含在想要的view块跳转即可，这是最常见的一种跳转方式,相当于html里的a标签

        区别：在wxml中页面进行跳转、默认navigateTo跳转，可以设置reLaunch等跳转方法。唯一wxml页面跳转，其他方法都是js跳转。该方法灵活性比差，跳转不受js控制。

        例：<navigator url="/pages/main/main"></navigator>

---

最后希望可以帮助到大家哦~  项目顺利~ 永无bug~