声明式导航

导航的方式

• 声明式导航
  • 在页面上声明一个导航组件
  • 通过点击组件实现页面跳转
• 编程式导航
  • 调用小程序的导航API,实现页面的跳转

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

导航到非tabBar页面

- open-type="navigate",这个属性可以不写

```
<navigator url="/pages/info/info" open-type="navigate"> 导航到非tabBar页面</navigator>
```

后退导航

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

编程式导航

• 跳转到tabbar页面
  
  • 跳转代码

 <button bindtap="gotoMessage">跳转到消息页面</button>
   gotoMessage(){
     wx.switchTab({
   url: '/pages/message/message'
 })
},

-跳转到非tabBar页面;

  <button bindtap="gotoInfo">跳转非 tabbar页面</button>
  gotoInfo(){
  wx.navigateTo({
    url: '/pages/info/info',
  })
},

• 后退

  <button bindtap="goBack" >后退</button>
   goBack(){
  wx.navigateBack({
    delta:1
  })
},

导航传参

声明式导航传参

编程式导航传参

在onload中接受参数

• 在onload中接收到的参数，把它放到data里面的query中，方便取用；

   data: {
  //导航传过来的参数对象，用query来接收一下
  query:{},
},
    /**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  console.log(options)
  //给query赋值
  this.setData({
    query:options
  })
},