微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

 在 微信小程序 里面若是有多个页面确定有页面跳转，例如，当用户扫一扫 微信小程序 二维码后，就进入到了小程序的首页里面，而后，点击某个分类就进入到了这个分类的列表页，点击列表页的某一连接的标题后就进行到了这个连接的内容页，固然，也能够从小程序的首页直接进入到内容页里面。

   从小程序的首页到列表而再到内容页，是一步一步的跳转的，也就是说通常的小程序都会从一个页面跳转到另外一个页面（固然，有的小程序只有一个页面，例如，计算器、房税计算等，这样的小程序比较少），若是想回到前一个页面能够点击小程序左上角的符号“<”便可返回到前一页。

  相似小程序这样的跳转是由小程序框架提供的接口实现的，这几个接口是：wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)、wx.navigateBack(OBJECT)和wx.switchTab。

  下面分别介绍这几个功能的使用区别与联系：

wx.navigateTo(OBJECT)

  这个接口是跳转到一个应用内的某个页面，可是，保留着当前页面，这句话很差理解什么是保留着当前页面？

以下图所示：

   
 

  若是使用接口wx.navigateTo的话，当点击“A页面”进入到“B页面”后，“A页面”仍然存在，若是从“B页面”进入到“C页面”，“A页面”和“B页面”都会保留着。

  这样有一个好处是，若是想从“C页面”回到“B页面”，只须要点击“C页面”的返回便可回到“B页面”，再点“B页面”的返回上一页面则回到“A页面”。

  使用wx.navigateBack能够返回到原页面。

---

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可经过 getCurrentPages() 获取当前的页面栈，决定须要返回几层。

OBJECT 参数说明：

参数	类型	默认值	说明
delta	Number	1	返回的页面数，若是 delta 大于现有页面数，则返回到首页。

示例代码：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码  // 此处是A页面 wx.navigateTo({   url: 'B?id=1' })  // 此处是B页面 wx.navigateTo({   url: 'C?id=1' })  // 在C页面内 navigateBack，将返回A页面 wx.navigateBack({   delta: 2 })

---

wx.redirectTo(OBJECT)

  关闭当前页面，跳转到应用内的某个页面。

  仍是用上面的三张图示做为例子，当使用wx.redirctTo接口跳转页面时，原来的页面将被删除掉，固然，这是小程序框架删除的并非咱们本身编写代码删除的，是腾讯把删除原页面的功能封装在了这个接口里面。

  当点击“A页面”进入到“B页面”时，原“A页面”将被删除掉，只留下当前页面“B页面”，若是从“B页面”又进入到了“C页面”后，那么，“B页面”也被删除掉了，当前页面就是“C页面”。

  若是我想回到“A页面”或“B页面”能够回去吗？ 不能，由于，已经被小程序框架给销毁了，只能直接回到小程序的首页。

  这就是这个接口wx.redirectto与wx.navigateTo的最主要区别。
 

---

接口wx.redirectto与wx.navigateTo的OBJECT 参数相同，以下表所示：
 

OBJECT 参数说明：

参数	类型	必填	说明
url	String	是	须要跳转的应用内非 tabBar 的页面的路径 , 路径后能够带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不一样参数用&分隔；如 'path?key=value&key2=value2'
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

  这两个接口里面的路径url后能够带参数，例如：
 

wx.redirectTo({ url: 'test?id=1' })

  当用户点击这个跳转后，就会一同把id值为1的参数带到test页面里面。

  跳转带参数很是重要，因此，下面作一个完整的实例来说解带参数是如何实现的。

---

实例：

  要求：当点击页面navigate，把id=9的参数带到新页面login页面，在login页面接收这个参数值，根据业务须要来处理这个id值。

  navigate页面和login页面在同一个目录里面，以下图所示：


navigate.wxml代码：
 

<view catchtap="ontouch" id="9"> <button >跳转带参数测试</button> </view>

  当用户点击这个按扭后，就会触发事件ontouch，并把一个事件对象带到navigate.js文件里面ontouch函数里面。

这个事件对象是：

  也就是在视图层navigate.wxml里面的id的值9会经过事件对象传递到逻辑层navigate.js里面，即在对象的e.currentTarget.id里面。

  这样咱们在作微信 小程序开发时，就能够经过e.currentTarget.id来获取视图层里的id值，而后，把这个id值以参数的形式带到login页面。

navigate.js代码：
 

 

ontouch:function(e){ console.log(e) wx.navigateTo({ url: '../login/login?id='+e.currentTarget.id, success: function (e) { console.log(e) } })

login.js代码：
 

onLoad: function (options) { console.log(options) }

  这样当点击“跳转带参数测试”按扭后就会在login.js文件里面的onLoad函数里面获取到一个对象options，options以下所示：
 

Object {id: "9"}

  显示options是一个对象，对象里面的id值正是从页面navigate.wxml获取到的id的值。

  至于，获取到上一个面页作什么，微信小程序开发者能够根据本身的业务须要来处理。
 

---

wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面

OBJECT 参数说明：

参数	类型	必填	说明
url	String	是	须要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

{   "tabBar": {     "list": [{       "pagePath": "index",       "text": "首页"     },{       "pagePath": "other",       "text": "其余"     }]   } }

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