微信小程序:五种路由的使用和区别

2023-08-27 19:00:39

微信:五种路由(wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack)的使用和区别:

1、wx.switchTab(跳转主页):跳转到tabBar页面,并关闭其他所有非tabBar页面,用于跳转到主页。

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


2、wx.reLaunch(关闭所有页面跳转):关闭所有页面,打开到应用内的某个页面。

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


3、wx.redirectTo(关闭当前页面跳转):关闭当前页面,跳转到应用内的某个页面,但不允许跳转到tabBar页面。

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


4、wx.navigateTo(保留页面跳转):保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面。

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


5、wx.navigateBack(页面返回):关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

wx.navigateBack({ delta: 1 })

以上代码均是以跳转到 /pages/index/index 页面为例。其中 delta 参数是 wx.navigateBack 的可选参数,表示返回的页面数,若 delta 不填则默认返回上一个页面





1、wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

示例代码:

// 跳转至 tabBar 中的首页 wx.switchTab({ url: '/pages/home/home', })


2、wx.reLaunch:关闭所有页面,打开到应用内的某个页面

示例代码:

// 跳转至应用内的某个页面 wx.reLaunch({ url: '/pages/my/my', })


3、wx.redirectTo:关闭当前页面,跳转到应用内的某个页面

示例代码:

// 跳转至应用内的某个页面 wx.redirectTo({ url: '/pages/login/login', })


4、wx.navigateTo:保留当前页面,跳转到应用内的某个页面,可以返回原页面

示例代码: // 跳转至应用内的某个页面,可以返回原页面 wx.navigateTo({ url: '/pages/message/message', })


5、wx.navigateBack:关闭当前页面,返回上一页面或多级页面

示例代码:

// 返回上一级页面 wx.navigateBack({ delta: 1, })