微信小程序开发笔记 - 路由导航

路由导航

目录

• 路由导航
  • 1. 声明式路由导航
    • 1.1 声明式后退导航
    • 1.2 声明式导航传参
  • 2. 编程式路由导航
    • 2.1 编程式后退导航
    • 2.3 编程式导航传参

1. 声明式路由导航

navigator标签被用于声明式路由导航

• url表示要跳转的页面地址，必须以/开头
• open-type表示跳转的方式，如果跳转的页面为tabBar页面，该属性必须为switchTab

<navigator url="/pages/info/info">导航到info页面</navigator>

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

1.1 声明式后退导航

如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性

• open-type的值必须是navigateBack，表示要进行后退导航
• delta的值必须是数字，表示要后退的页面数

<navigator open-type="navigateBack" delta="1">后退</navigator>

1.2 声明式导航传参

navigator组件的url属性末尾可以携带参数：

• 参数和路径之间使用?分隔
• 参数键和参数值用=相连
• 不同参数用&分隔

<navigator url="/pages/info/info?name=zs&age=20">跳转到info界面</navigator>

传递参数后，可以使用onLoad函数的option参数获取与调用参数

onLoad: function (options){
    console.log(options)
}

2. 编程式路由导航

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面

调用wx.navigateTo(Object object)方法，可以跳转到非tabBar页面s

其中Object参数对象可选的属性列表如下：

属性	说明
url	需要跳转的tabBar页面的路径，路径后不能带参数
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（无论调用结果如何都会执行）

• 示例代码

  - WXML

  <button bind:tap="gotoMessage">跳转到消息页面</button>
  

  - JS

  //导航到tabBar页面
  gotoMessage(){
      wx.switchTab({
          url:'/pages/message/message'
      })
  }
  
  //导航到非tabBar页面
  gotoInfo(){
      wx.navigateTo({
          url:'/pages/info/info'
      })
  }
  

2.1 编程式后退导航

如果要后退到上一页面或多级页面，需要调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。

其中Object参数对象可选的属性列表如下：

属性	说明
delta	后退的页面数，如delta大于现有页面数，则返回到首页
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（无论调用结果如何都会执行）

• 示例代码

  - WXML

  <button bind:tap="gotoBack">后退</button>
  

  - JS

  goBack(){
      wx.navigateBack({
          wx.navigateBack()
      })
  }
  

2.3 编程式导航传参

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

gotoInfo(){
    wx.navigateTo({
        url:'/pages/info/info?name=ls&gender=男'
    })
}

获取、调用参数的方法与声明式导航一致