小程序跳转页面导航

🎪页面导航

页面导航指的是页面之间的相互跳转。例如：浏览器中实现页面导航的方式有两种方式，分别是<a>链接 和 loaction.href，而小程序实现页面导航也有两种方式，如下：

🍇声明式导航

在页面上声明一个<navigator>导航组件

通过点击<navigator>组件实现页面跳转

 导航到tabBar页面 

tabBar页面指的是被配置为tabBar的页面。在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url(表示要跳转的页面地址，必须以 / 开头)属性和open-type(表示跳转的方式，属性必须是switchTab)属性，代码如下：

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

导航到非tabBar页面 

非tabBar页面指的是没有配置为tabBar的页面。在使用<navigator>组件跳转到普通的非tabBar页面时，则需要指定url(表示要跳转的页面地址，必须以 / 开头)属性和open-type(表示跳转的方式，属性必须是navigate)属性，为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略，代码如下：

<navigator url="/pages/person/person" open-type="navigate">导航到person页面</navigator>

后退导航 

如果要后退到上一页或多级页面，则需要指定open-type(值必须是navigateBack，表示要进行后退导航)属性和dalta(指必须是数字，表示要后退的层级)属性，为了简便，如果只是后退到上一页面，则可以省略delta属性，其默认值就是1，代码如下：

<navigator open-type="navigateBack" delta='1'>返回上一页</navigator>

 🍈编程式导航 

调用小程序的导航API，实现页面的跳转

导航到tabBar页面

wx.switchTab(OBJECT)（跳转主页）

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

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

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象属性列表如下：

示例代码如下

//页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>
 
// 通过编程式导航，跳转到message页面
gotoMessage(){
  wx.switchTab({
    url: '/pages/message/message',
  })
}

导航到非tabBar页面 

wx.navigateTo(OBJECT) （保留页面跳转）

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

调用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面，其中Object参数对象的属性列表和wx.switchTab属性列表一致。示例代码如下：

//页面结构
<button bindtap="gotoPerson">跳转到person页面</button>
 
//通过编程式导航，跳转到person页面
gotoPerson(){
  wx.navigateTo({
    url: '/pages/person/person',
  })
},

小程序中左上角有一个返回箭头，可返回上一个页面

也可以通过方法 wx.navigateBack 返回原页面

wx.redirectTo(OBJECT) （关闭当前页面跳转）

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

 

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

wx.reLaunch(OBJECT) （关闭所有页面跳转）

关闭所有页面，打开到应用内的某个页面。

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

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

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

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

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

后退导航

wx.navigateBack(Object object) （页面返回）

调用wx.navigateBack(Object object)方法，可以返回上一页或多级页面，其中Object参数对象可选属性列表和上面列表大体一致，唯一区别在于url换成了dalta。 示例代码如下：

//页面结构
<button bindtap="gotoBack">后退</button>
 
// 编程式导航，返回上一页
gotoBack(){
  wx.navigateBack()
}