微信小程序路由跳转

小程序路由跳转官网链接

1|0一、声明式导航

• 在页面上声明一个<navigator>导航组件
• 通过点击<navigator>组件实现页面跳转

1|11.导航到tabBar页面

• tabBar页面指的是被配置为tabBar的页面

• 在使用<navigator>组件跳转至指定的tabBar页面时，需要指定url和open-type属性，其中：

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

• 示例代码如下：

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

1|22.导航到非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"属性可以省略 -->
  

1|33.后退导航

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

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

• 示例代码如下：

  <navigator open-type="navigateBack" delta="1">返回上一页</navigator>
  <!-- 注：为了简便，如果只是后退到上一页面，则可以省略delta属性，因为其默认值就是1 -->
  

2|0二、编程式导航

• 调用小程序的导航API，实现页面的跳转

2|11.导航到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|22.导航到非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'
      })
  }
  

2|33.后退导航

• 调用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()
  }
  

__EOF__

本文作者：不见水星记
本文链接：https://www.cnblogs.com/P1Kaj1uu/p/16731777.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！