面试官：说说微信小程序中路由跳转的方式有哪些？区别？

港控/mmm° 2022-09-16 15:13 127阅读 0赞

![4dcefbc1a5ea3eca5c0f687ccca92326.png][]

## 一、是什么 ##

微信小程序拥有`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`进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用

参数表如下所示：

![a52ce13ac590200cbe04e631c97ebce7.png][]

流程图如下：

![87811c963acb44f48d28fad03af293c2.png][]

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

重定向，当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 10 层页面栈的情况下，我们应该考虑选择 `wx.redirectTo`

`wx.redirectTo()`用于关闭当前页面，跳转到应用内的某个页面

这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间

参数表如下所示：

![dfb3575555b6f9fca00b806384da0235.png][]

流程图如下所示：

![caf6195d6cbaba849b40845151bde58f.png][]

### wx.switchTab(Object) ###

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

参数表如下所示：

![5aced4d85df92c7ff5b0ba8204198138.png][]

### wx.navigateBack(Object) ###

`wx.navigateBack()` 用于关闭当前页面，并返回上一页面或多级页面，开发者可通过 `getCurrentPages()` 获取当前的页面栈，决定需要返回几层则设置对象的`delta`属性即可

参数表如下：

![367582f2610745234c20fb245d8874ff.png][]

### wx.reLaunch(Object) ###

关闭所有页面，打开到应用内的某个页面，返回的时候跳到首页

流程图如下所示：

![cc08a4dfca93c7fe953002c268ae9132.png][]

参数表如下所示：

![feaa2d15c945ddc269e1eea6c2b759f2.png][]

## 三、总结 ##

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

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

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

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

## 参考文献 ##

*  https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

\--The End--

系列正在更新：3/8

点击下方卡片解锁更多

![249f78fd5ecf66227c3b7df0f6b7a1ab.png][]

创作不易，星标、点赞、在看 三连支持

[4dcefbc1a5ea3eca5c0f687ccca92326.png]: /images/20220828/4a835fd9dfd34d3094a54378e8ebd627.png
[a52ce13ac590200cbe04e631c97ebce7.png]: /images/20220828/480c36416a524dd2b61ed7957ec5b5c8.png
[87811c963acb44f48d28fad03af293c2.png]: /images/20220828/273f8155fa164857ab5f8c4609908a86.png
[dfb3575555b6f9fca00b806384da0235.png]: /images/20220828/fd5926d95f25403882474b2d1c515f68.png
[caf6195d6cbaba849b40845151bde58f.png]: /images/20220828/057e7a4566514474a571fe69c34fc7be.png
[5aced4d85df92c7ff5b0ba8204198138.png]: /images/20220828/d1a48578137d43359b3de1dc8bb574be.png
[367582f2610745234c20fb245d8874ff.png]: /images/20220828/032c2219c61642288b767c7088938f87.png
[cc08a4dfca93c7fe953002c268ae9132.png]: /images/20220828/3e4d3844792243b69b0b4917a1927b5a.png
[feaa2d15c945ddc269e1eea6c2b759f2.png]: /images/20220828/f1de42cd92374b1eb2d3e5827b097cb4.png
[249f78fd5ecf66227c3b7df0f6b7a1ab.png]: /images/20220828/cc6ace60aa634e69860296bbcb47693d.png