微信小程序（一）[路由页面跳转]

tabBar 页面和非tabBar 页面

在微信开发中有底部导航可以在app.json中tabBAR设置tabBar页面，而在路由跳转这几个方法中有的只能指定非tab页面或者必须tab页面，除了在app.json中设置的页面外都算做非tab页面。

"tabBar" :{
    "list": [
      {
        "pagePath": "pages/AAA/AAA",
        "text": "AAA"
      },
      {
        "pagePath": "pages/BBB/BBB",
        "text": "BBB"
     }
   ]
}

navigateTo

保留当前页面跳转到非tab页面，左上角指针可以返回上一页面。
我们新建A和B两个页面进行跳转。

在A页面设置按钮跳转到B页面，使用navigateTO方法：

<view>
  A页面
  <button bindtap="tapB">跳到B页面</button>
</view>

tapB: function() {
    wx.navigateTo({
      url: '/pages/BBB/BBB'
    })
}

效果图：

跳转传参

navigateTo 后可以跟参数传递到指定页面，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2' ，然后在跳转的页面中 onLoad(options) 的参数来接收。
A页面：

tapB: function() {
    wx.navigateTo({
      url: '/pages/BBB/BBB?id=666'
    })
  }

B页面：

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

navigateBack

关闭当前页面并返回上一页或多个页，不可传参。
我们使用a页面跳到b页面在由b页面点击触发navigateBack返回上一页。
A页面代码不变。
b页面代码：

<view class="container">
	<text>B页面</text>
  <button bindtap="tapA">点击</button>
</view>

使用delta 参数可以设置返回多少页面。

tapA :function (){
    wx.navigateBack({
      delta :1 
    })
  }

效果图：

redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。可以传参。带有返回按钮。

例子一

在A页面使用redirectTo跳到B页面查看效果：
A：

tapB: function() {
    wx.redirectTo({
      url: '/pages/BBB/BBB?id=666'
    })
  }

效果：

例子二

A页面使用navigateTo跳到B页面由B页面使用redirectTo 跳到C页面来看效果：
B：

tapC :function (){
    wx.redirectTo({
      url:"/pages/CCC/CCC"
    })
  }

效果：

例子对比

对比两个例子发现，我们发现虽然第一个例子还是返回到A页面但按钮是回到第一页的图标，而在第二个例子中是跳过了B页返回A页，由此可以看出 redirectTo 方法带有返回按钮但使用了这个方法的页面关闭可以返回之前的页面，如果没有可以返回到首页。

reLaunch

关闭所有页面，打开到应用内的某个页面，可以带参数，可以跳转到tab页面和非tab页面。
我们把AB页面设置成tab页面来进行测试，A页面使用reLaunch 跳转到 非tab页的C页面，C页面在使用 reLaunch 跳转到 tab页的A页面。
A：

tapA: function() {
    wx.reLaunch({
      url: '/pages/CCC/CCC'
    })
  }

C：

 tapC: function() {
    wx.reLaunch({
      url: '/pages/AAA/AAA'
    })
  }

可以看出AB为tab页，跳到非tab页的C页面时可以点击回首页，说明关闭了所有页面，C也可以跳到tab页的A页面：

switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，不能带参数。
还是AB两页tab页面，我们先试试A页面使用 switchTab 跳转非tabC页面。
A：

 tapA: function() {
    wx.switchTab({
      url: '/pages/CCC/CCC'
    })
  }

保存点击按钮后报错了:

用这个方法指定tab页面即可。