1. 什么是页面导航
页面导航指的是页面之间的相互跳转。
例如，浏览器中实现页面导航的方式有如下两种：
<a>链接- location.href
2. 小程序中实现页面导航的两种方式
- 声明式导航
在页面上声明一个<navigator>导航组件
通过点击<navigator>组件实现页面跳转 - 编程式导航
调用小程序的导航 API，实现页面的跳转
3. 声明式导航
3.1. 导航到 tabBar 页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
- url 表示要跳转的页面的地址，必须以 / 开头
- open-type 表示跳转的方式，必须为 switchTab
被配置为 tabBar 的页面：
"tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "/images/tabs/home.png", "selectedIconPath": "/images/tabs/home-active.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "/images/tabs/message.png", "selectedIconPath": "/images/tabs/message-active.png" }, { "pagePath": "pages/contact/contact", "text": "联系我们", "iconPath": "/images/tabs/contact.png", "selectedIconPath": "/images/tabs/contact-active.png" } ] },
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <!-- <button type="primary" bindtap="getInfo">发起get请求</button> --> <!-- <button type="primary" bindtap="getInfo2">发起post请求</button> --> <navigator url="/pages/message/message" open-type="switchTab" class="nav" >导航到消息页面</navigator>
/* pages/home/home.wxss */ .nav { background-color: cadetblue; border: black 1px solid; text-align: center; }
3.2. 导航到非 tabBar 页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：
- url 表示要跳转的页面的地址，必须以 / 开头
- open-type 表示跳转的方式，必须为 navigate
注意：为了简便，在导航到非 tabBar 页面时，open-type=“navigate” 属性可以省略。
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <navigator class="navt" url="/pages/list/list" open-type="navigate" >导航到list页面</navigator> <navigator class="navt" url="/pages/list/list" >导航到list页面</navigator>
3.3. 后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
- open-type 的值必须是 navigateBack，表示要进行后退导航
- delta 的值必须是数字，表示要后退的层级
注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。
<!--pages/list/list.wxml--> <navigator open-type="navigateBack" delta="1">后退</navigator> <navigator open-type="navigateBack">后退</navigator> <view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="content" wx:key="id" > id: {{content.id}} 索引：{{idx}} -- 当前项：{{content.content}} </view>
4. 编程式导航
4.1. 导航到 tabBar 页面
调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <navigator class="navt" url="/pages/list/list" open-type="navigate" >导航到list页面</navigator> <navigator class="navt" url="/pages/list/list" >导航到list页面</navigator> <button bindtap="goMessage" type="primary">跳转到消息页面</button>
// pages/home/home.js Page({ /** * 页面的初始数据 */ data: { }, goMessage() { wx.switchTab({ url: '/pages/message/message' }) } })
4.2. 导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <button bindtap="goList" >跳转到list页面</button>
// pages/home/home.js Page({ /** * 页面的初始数据 */ data: { } goMessage() { wx.switchTab({ url: '/pages/message/message' }) }, goList() { wx.navigateTo({ url: '/pages/list/list', }) } })
4.3. 后退导航
调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：
<!--pages/list/list.wxml--> <button type="primary" bindtap="goBack"></button> <view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="content" wx:key="id" > id: {{content.id}} 索引：{{idx}} -- 当前项：{{content.content}} </view>
// pages/list/list.js Page({ data: { arr: [ {id: 1, content: 'a'}, {id: 2, content: 'b'}, {id: 3, content: 'c'}, {id: 4, content: 'd'}, {id: 5, content: 'e'} ] }, goBack() { wx.navigateBack({ delta: 1 }) } })
5. 导航传参
5.1. 声明式导航传参
navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
- 参数与路径之间使用 ? 分隔
- 参数键与参数值用 = 相连
- 不同参数用 & 分隔
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <navigator class="navt" url="/pages/message/message?name='zs'&age=12" open-type="switchTab" >跳转到信息页面</navigator> <button bindtap="goList" >跳转到list页面</button>
5.2. 编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <navigator class="navt" url="/pages/message/message?name='zs'&age=12" open-type="switchTab" >跳转到信息页面</navigator> <button bindtap="goList" >跳转到list页面</button>
// pages/home/home.js Page({ /** * 页面的初始数据 */ data: { } goMessage() { wx.switchTab({ url: '/pages/message/message?name="ls"&age=22' }) }, goList() { wx.navigateTo({ url: '/pages/list/list', }) } })
5.3. 在 onLoad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <navigator class="navt" url="/pages/list/list?name='zs'&age=12" open-type="navigate" >跳转到list页面</navigator>
// pages/list/list.js Page({ data: { arr: [ {id: 1, content: 'a'}, {id: 2, content: 'b'}, {id: 3, content: 'c'}, {id: 4, content: 'd'}, {id: 5, content: 'e'} ] }, goBack() { wx.navigateBack({ delta: 1 }) }, onLoad( messageVal ) { console.log( messageVal ) } })
