一、声明式导航
- 在页面上声明一个
<navigator>导航组件 - 通过点击
<navigator>组件实现页面跳转
1.导航到tabBar页面
-
tabBar页面指的是被配置为tabBar的页面
-
在使用
<navigator>组件跳转至指定的tabBar页面时，需要指定url和open-type属性，其中：- url表示要跳转的页面的地址，必须以 / 开头
- open-type表示跳转的方式，必须为 switchTab
-
示例代码如下：
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
2.导航到非tabBar页面
-
非tabBar页面指的是没有被配置为tabBar的页面
-
在使用
<navigator>组件跳转到普通的非tabBar页面时，则需要指定url属性和open-type属性，其中：- url表示要跳转的页面的地址，必须以 / 开头
- open-type表示跳转的方式，必须为 navigate
-
示例代码如下：
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator> <!-- 注：为了方便，在导航到非tabBar页面时，open-type="navigate"属性可以省略 -->
3.后退导航
-
如果要后退到上一页面或多级页面，则需要指定open-type属性delta属性，其中：
- open-type 的值必须是 navigateBack，表示要进行后退导航
- delta 的值必须是 数字，表示要后退的层级
-
示例代码如下：
<navigator open-type="navigateBack" delta="1">返回上一页</navigator> <!-- 注：为了简便，如果只是后退到上一页面，则可以省略delta属性，因为其默认值就是1 -->
二、编程式导航
- 调用小程序的导航API，实现页面的跳转
1.导航到tabBar页面
-
调用wx.switchTab(Object object) 方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：
属性 类型 是否必选 说明 url string 是 需要跳转的tabBar页面的路径，路径后面不能带参数 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） -
基本使用：
wx.switchTab({url: '/pages/message/message'}) -
示例代码如下：
// 页面结构 <button bindtap="gotoMessage">跳转到消息页面</button> // 通过编程式导航，跳转到message页面 gotoMessage () { wx.switchTab({ url: '/pages/message/message' }) }
2.导航到非tabBar页面
-
调用wx.navigateTo(Object object) 方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：
属性 类型 是否必选 说明 url string 是 需要跳转到的非tabBar页面的路径，路径后面可以带参数 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） -
基本使用：
wx.navigateTo({url: '/pages/info/info'}) -
示例代码如下：
// 页面结构 <button bindtap="gotoInfo">跳转到Info页面</button> // 通过编程式导航，跳转到Info页面 gotoInfo () { wx.navigateTo({ url: '/pages/info/info' }) }
3.后退导航
-
调用wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中Object参数对象的属性列表如下：
属性 类型 默认值 是否必选 说明 delta number 1 否 返回的页面数，如果delta大于现有页面数，则返回首页 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） -
基本使用：
wx.navigateBack({delta: 1}) -
示例代码如下：
// 页面结构 <button bindtap="gotoBack">后退</button> // 通过编程式导航，后退到上一页面 gotoBack () { wx.navigateBack() }