微信小程序路由跳转及传参

微信小程序的跳转分很多,也是分的比较详细点吧,我觉得用熟练之后各有各的特色和用处,所以这篇博客就来啦 另一方面如果真正把握好跳转时隐藏还是关闭，返回界面是哪个，页面跳转真的能省力不少
好啦,废话不多说,我们开始

微信小程序里面提供了许多种的路由跳转方式给我们

1. wx.switchTab(Object object)
   这里Tab指的是我们页面底部的tabber导航栏的的页面,也就是我们写在app.json中定义的tabbar页面
   效果是跳转到tabbar页面 并关闭其他非tabbar页面 不能传递参数

示例代码:

{
  "tabBar": {
    "list": [
      {
        "pagePath": "index",
        "text": "首页"
      },
      {
        "pagePath": "other",
        "text": "其他"
      }
    ]
  }
}

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

2. wx.reLaunch(Object object)
   这个作用是关闭所有页面,打开到应用的某个页面 可以携带参数
   
   示例代码:

wx.reLaunch({
  url: 'test?id=1'
})

 test Page({ onLoad (option) { console.log(option.query) } })

3. wx.redirectTo(Object object)
   关闭当前的页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
   可以携带参数
   
   示例代码:

wx.redirectTo({
  url: 'test?id=1'
})

4. wx.navigateTo(Object object)
   保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack可以返回到原页面 可传参 程序中页面栈最多十层
   

示例代码:

wx.navigateTo({
  url: 'test?id=1'
})

// test.js
Page({
  onLoad(option) {
    console.log(option.query)
  }
})

5. wx.redirectTo与wx.navigateTo的区别
   利用wx.navigateTo跳转到下一个页面的时候（这时候会执行onHide方法），下一个页面头部会有返回按钮
   如果不想有返回按钮，可以用wx.redirectTo进行页面跳转（这时候关闭此页面，会执行onUnload生命周期，这样下一个页面就不会有返回按钮了，因为上一个页面已经被关闭了，没有页面可以返回）
6. wx.navigateBack(Object object)
   关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()获取当前的页面栈，可以决定需要返回几层
   
   示例代码:

// 注意：调用 navigateTo 跳转时，
//调用该方法的页面会被加入堆栈，
//而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

最后传递的参数可以在生命周期onLoad的options里获得
还有就是通过函数的event.currentTarget.dataset来获得传递的参数