微信小程序边做边学--路由

才开始学，了解不多，当做学习，当做记录

微信小程序路由跳转的方式有两大类：1.提供的api跳转，2.wxml 页面组件跳转
一、api方式
1、wx.navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能调到tabBar页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
这个方法基本也是 使用相对较多的
注意的就是不能调到tabBar页面

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

2、wx.switchTab
跳转到tabBar页面，并关闭其他所有费tabBar页面
说一下tabBar页面吧，其实就是小程序的导航，也就是我们用小程序或者APP 下面的几大类，
如果你要跳转的页面是这几种可以使用这种方式， 解决了wx.navigateTo 不可以跳转到这些页面的问题

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

3、wx.reLaunch
关闭所有页面，打开到应该用的某个页面

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

4、wx.redirectTo
关闭当前页面，跳转到应用的某个页面。但是不允许调到tabbar页面

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

5、wx.navigateBack
关闭当前页面，返回上一页面或者多级页面。可以通过getCurrentPages获取页面栈，决定返回到哪层。

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

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

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

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

总结一下这个几个方法：
1、常用的是navigateTo 他跳转后不会关闭原来的页面，并且会把当前页面记录在页面栈中 方便navigateBack 反回的某个页面
2、switchTab 可以跳转到tabBar页面 但会关闭其他非tabbar页面
3、redirectTo 和 navigateTo 相似 但跳转后会关闭当前页面
4、reLaunch 可以跳转到任何页面 但却会关闭所有 其他页面

这api 的区别主要是两大类：1.能否调到tabbar 页面 2、跳转后其他页面打开关闭的状态
根据实际开 根据各自的特点选择合适的api

二、wxml 页面组件跳转(navigator)
主要就是使用小程序自带组件 navigator
重要属性就是 open-type
他们的值对应的就是wx.navigateTo、wx.redirect 、 wx.switchTab、wx.reLaunch、wx.navigateBack

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator>

// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面，返回上一级页面或多级页面</navigator>

option.type 还有一个值 exit 表示退出小程序

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html
https://www.cnblogs.com/yaoyuqian/p/7967472.html