[小程序]页面跳转

一、页面跳转

? ? ? ? 1.声明式导航

? ? ? ? 使用<navigate>组件实现（固定式），需要指定url属性(跳转位置)和open-type属性(跳转方式)

? ? ? ? ? ? ? ? ①跳转tabBar页面

????????open-type属性必须指定类型为switchTab

<navigator url="/pages/index/index" open-type="switchTab">跳转index页</navigator>

? ? ? ? ? ? ? ? ②跳转非tabBar页面

?????????open-type属性必须指定位置navigate(可以缺省)

<navigator url="/pages/logs/logs" open-type="navigate">跳转log页</navigator>

? ? ? ? ? ? ? ? ③后退导航

? ? ? ? open-type值为navigateBack，delta值为数字，表示返回的层级(默认为1)

<navigator open-type="navigateBack" delta="1">返回上一级</navigator>

? ? ? ? 2.编程式导航

? ? ? ? ? ? ? ? ①跳转tabBar页面?

? ? ? ? 调用API实现，使用wx.switchTab(Object object)方法来跳转，object对象中包含以下属性：

url	跳转链接(必填项)
success	成功时回调函数
fail	失败时回调函数
complete	结束时回调函数

<button bindtap='goIndex'>跳转Index页</button>

goIndex(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

? ? ? ? ? ? ? ? ②跳转非tabBar页面

? ? ? ? 调用wx.navigateTo实现，参数列表同上

  goLogs(){
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },

? ? ? ? ? ? ? ? ③返回导航

? ? ? ? 调用wx.navigateBack实现（不需要指定delta属性）

  goBack(){
    wx.navigateBack()
  },

二、导航传参

? ? ? ? 1.声明式导航传参

? ? ? ? 类似于http中的GET指令，参数与路径之间使用 ? 进行分隔；参数键与参数之间以 = 相连；不同参数之间用 & 隔开。

<navigator url="pages/show/show?name=Alice&age=18">跳转Show页</navigator>

? ? ? ? 2.编程式导航传参

? ? ? ? 基本和声明式一致，使用参数路径的方式传参

  goShow(){
    wx.navigateTo({
      url: '/pages/show/show?name=Coco&age=22',
    })
  },

? ? ? ? 3.接收参数

? ? ? ? 传递给页面的参数可以在对应的onLoad参数中获取，如下：

  onLoad(options) {
    this.setData({name:options.name})
    this.setData({age:options.age})
  },

?