小程序的页面导航

页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：

• 声明式导航：通过点击 navigator 组件实现页面跳转的方式
• 编程式导航：通过调用小程序的 API 接口实现跳转的方式

声明式导航

1. 导航到非 tabBar 页面

非 tabBar 页面指的就是没有被当做 tabBar 进行切换的页面

示例代码如下：

<navigator url="/pages/info/info">去info页面</navigator>

上述代码使用 url 属性指定要跳转到的页面路径，其中，页面路径应该以 / 开头，且路径必须提前在 app.json的pages节点下声明，才能实现正常的跳转

2. 导航到 tabBar 页面

tabBar 页面指的是被当做 tabBar 进行切换的页面，如果 navigator 组件单纯使用 url 属性，无法导航到tabBar 页面，需要结合 open-type 属性进行导航

示例代码如下：

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

3. 后退导航

如果要后退到上一页面或多级页面，需要把 open-type 设置为 navigateBack, 同时使用 delta 属性指定后退的层级数，示例代码如下：

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

4. 声明式导航传参

navigator 组件的 url 属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间用 ？分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

示例代码：

<navigator url="/pages/logs/logs?name=zs&age=18">去logs页面</navigator>

编程式导航

1. 导航到非 tabBar页面

通过 wx.navigateTo(object,object)方法，可以跳转到应用内的某个页面，但是不能跳转到 tabBar 页面，其中 object 参数对象的属性列表如下：

属性	类型	是否必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数，参数与路径之间用 ？隔离，参数键与参数值用 = 连接，不同参数用 & 分隔，如'path?key=value&key2=value2'
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数( 调用成功、失败都会执行)

2. 导航到 tabBar 页面

通过 wx.switchTab(object,object)方法，可以跳转到 tabBar 页面，并关闭其他所有非 tabBar页面，其中object参数对象的属性列表如下：

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

3. 后退导航

通过 wx.navigateBack(object,object)方法，关闭当前页面，返回上一页面或多级页面，其中object参数对象的属性列表如下：

 

属性	类型	是否必填	说明
delta	number	是	返回的页面数，如果 delta 大于现有页面数，则返回到首页
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功、失败都会执行)

示例代码：

<button type="primary" bindtap="btnHandle">通过编程式导航后退</button>

// 在对应的.js文件中与data平级定义下面的函数
btnHandle: function(){
    wx.navigateBack({
        delta: 1
    })
}

4. 编程式导航传参

wx.navigateTo(object,object)方法的 object 参数中，url属性用来指定需要跳转的应用内非tabBar页面的路径，路径后可以带参数，参数与路径之间使用？分隔，参数键和参数值用 = 相连，不同参数用 & 分隔

示例代码：

wx.navigateTo({
    url:'/pages/info/info?name=zs&age=18'
})

页面接收导航传递过来的参数

不论是声明式导航传参还是编程式导航传参，最终导航到的页面可以在onLoad生命周期中接收传递过来的参数

代码示例如下：

// 生命周期函数--监听页面加载
onLoad: function(options){
    console.log(options)// options就是导航传递过来的参数
}