小程序页面导航全家桶：navigateTo、redirectTo、switchTab等方法一网打尽，快速掌握不同场景下的最佳应用！

曾经终败给现在 2024-04-25 20:12 2阅读 0赞

![b4a3243473aa4644926b861832b0cee4.gif][]

**🎬 江城开朗的豌豆**：[个人主页][Link 1]

**🔥 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

📝 **个人网站** :[《 江城开朗的豌豆🫛 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

⭐ 专栏简介

📘 文章引言

一、是什么

二、有哪些

wx.navigateTo(Object)

wx.redirectTo(Object)

wx.switchTab(Object)

wx.navigateBack(Object)

wx.reLaunch(Object)

三、总结

⭐ 写在最后

--------------------

### ⭐ 专栏简介 ###

> 欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。
> 
> ![d3d827793cb7463581b9054b61d9f5e9.png][]
> 
> 同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。

![58f57bd93ba343be90b6abee12b29308.png][]

### [📘][Link 3] 文章引言 ###

### 一、是什么 ###

微信小程序拥有`web`网页和`Application`共同的特征，我们的页面都不是孤立存在的，而是通过和其他页面进行交互，来共同完成系统的功能

在微信小程序中，每个页面可以看成是一个`pageModel`，`pageModel`全部以栈的形式进行管理

### 二、有哪些 ###

常见的微信小程序页面跳转方式有如下：

>  *  wx.navigateTo(Object)
>  *  wx.redirectTo(Object)
>  *  wx.switchTab(Object)
>  *  wx.navigateBack(Object)
>  *  wx.reLaunch(Object)

#### wx.navigateTo(Object) ####

> `wx.navigateTo()`用于保留当前页面、跳转到应用内的某个页面，使用 `wx.navigateBack`可以返回到原页面
> 
> 对于页面不是特别多的小程序，通常推荐使用 `wx.navigateTo`进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用

#### wx.redirectTo(Object) ####

> 重定向，当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 10 层页面栈的情况下，我们应该考虑选择 `wx.redirectTo`
> 
> `wx.redirectTo()`用于关闭当前页面，跳转到应用内的某个页面
> 
> 这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间

> #### wx.switchTab(Object) ####
> 
> 跳转到 `tabBar`页面，并关闭其他所有非 `tabBar` 页面
> 
> #### wx.navigateBack(Object) ####
> 
> `wx.navigateBack()` 用于关闭当前页面，并返回上一页面或多级页面，开发者可通过 `getCurrentPages()` 获取当前的页面栈，决定需要返回几层则设置对象的`delta`属性即可
> 
> #### wx.reLaunch(Object) ####
> 
> 关闭所有页面，打开到应用内的某个页面，返回的时候跳到首页

### 三、总结 ###

关于上述五种跳转方式，做下总结：

>  *  navigateTo 保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页
>  *  redirectTo 关闭当前页面，跳转到应用内的某个页面
>  *  switchTab 跳转到 tabBar 页面，同时关闭其他非 tabBar 页面
>  *  navigateBack 返回上一页面
>  *  reLanch 关闭所有页面，打开到应用内的某个页面

其中关于它们的页面栈的关系如下：

>  *  avigateTo 新页面入栈
>  *  redirectTo 当前页面出栈，新页面入栈
>  *  navigateBack 页面不断出栈，直到目标返回页，新页面入栈
>  *  switchTab 页面全部出栈，只留下新的 Tab 页面
>  *  reLanch 页面全部出栈，只留下新的页面

### ⭐ 写在最后 ###

> 请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

![b061e7afd3a14e3c993d485acf3320f0.png][]

[b4a3243473aa4644926b861832b0cee4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/1698d540a61a45dc919387a3497e9b02.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/47f552aeea1549dba562d9899f04d049.gif
[d3d827793cb7463581b9054b61d9f5e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/38040417d2f14d35a4d8322e915d7107.png
[58f57bd93ba343be90b6abee12b29308.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/2cf2325330a54530b0b1bc1449c1ff45.png
[Link 3]: https://blog.csdn.net/qq_48652579/article/details/133752898?spm=1001.2014.3001.5501#%E5%BC%95%E8%A8%80
[b061e7afd3a14e3c993d485acf3320f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/c10ffd7e905046a1bf2cc07461514dca.png