小程序的页面导航本篇主要讲述小程序导航的声明、导航的跳转、导航的传参及参数的接收。声明导航还分为声明式导航和编程式导航。

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

页面导航指的是页面之间的相互跳转

如果要后退到上一页或多级页面，则需要指定 open-type 属性和 delta 属性
- open-type 的值必须是 navigateBack，表示要进行后退导航
- delta 的值必须是数字，表示要后退的层级（如果只是后退到上一页，那么可以不用 delta 属性，默认delta 的值就是1）

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

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

页面结构（.wxml 文件）

<button bindtap="gotoMessage"> 跳转到 tabBar 页面 </button>

页面数据（.js 文件）

gotoMessage() {
    wx.switchTab({
        url: '/pages/message/message'
    })
},

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

属性	类型	是否选中	说明
url	string	是	需要导航到非 tabBar 页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功，失败都会执行）

页面结构（.wxml 文件）

<button bindtap="gotoInfo"> 跳转到非tabBar页面 </button>

页面数据（.js 文件）

gotoInfo(){
    wx.navigateTo({
        url: '/pages/Info/Info'
    })
},

调用 wx.navigateBack(Object Object) 方法，可以返回上一页或多级页面，其中 Object 参数对象的属性列表如下：

属性	类型	默认值	是否选中	说明
delta	number	1	否	返回的页面数，如果 `delta` 大于现有页面数，则返回到首页
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功，失败都会执行）

页面结构（.wxml 文件）

<button bindtap="back"> 返回上一页 </button>

页面数据（.js 文件）

back(){
    wx.navigateBack({
        delta: 1,
    })
},

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

<navigator url="/pages/Info/Info?name=kaka&age=20">跳转到 info 页面</navigator>

调用 wx.navigateTo(Object Object) 方法跳转页面时，可以携带参数：

页面结构（.wxml 文件）

<button bindtap="gotoInfo"> 跳转到 info 页面 </button>

页面数据（.js 文件）

gotoInfo(){
    wx.navigateTo({
        url: '/pages/Info/Info?name=kaka&age=20'
    })
},

通过导航传递过来的参数，可以直接在 onLoad 事件中直接获取

onLoad: function (options) {
    //options 就是导航传递过来的参数对象
    console.log(options);
},