一、小程序跳转方式

1、wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。

使用备注：由于tabBar在切换器需要获取收取及是否登录的判断，故当前小程序的tabBar是自定义组件，该跳转无效

只有该方法的url参数，不能进行拼接，必须跟tabBar配置的路由一模一样；wx.navigateBack没有url参数

2、wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面

3、wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

导航样式： 如果当前只有一个路由层级，导航header左侧会默认显示可以进入“首页”的图标

4、wx.navigateTo(Object object)

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

events用于监听被打开页面发送到当前页面的数据。

导航样式：导航header左侧会默认显示“返回”的图标

5、wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

通过参数delta设置返回的页面数，如果delta大于现有页面数，则返回到首页。默认值为1

二、二货集小程序路由分析

1、目前所有pages——总计10个

存在潜在路由层级超过10个风险

当路由层级达到10个时，wx.navigateTo将无法打开新页面

'pages/index/index',
'pages/publish/index',
'pages/detail/index',
'pages/search/index',
'pages/profile/index',
'pages/profile/contact/index',
'pages/profile/contact/add/index',
'pages/profile/edit/index',
'pages/profile/feedback',
'pages/myProductList/index',

2、路由跳转方式使用现状

2.1、wx.redirectTo的使用

使用条件

• 不需要返回到当前页面时
• 同时，其他页面仍需要返回显示时

使用效果

• 关闭当前页面，同时打开一个新页面，即便新页面还在路由栈里
  • 在新页面不会返回到当前页面
• 路由栈层级级数不变
  • 跟在当前页的路由栈层级比较起来，层级不变
  • 跟进入该页面之前比起来，路由栈层级增加1
  • 如果反复进入该当前页面，则会导致路由层级不断增加
  • 需要谨慎使用

使用页面

• 发布页面，在新建状态下，提交成功后，进入“该商品详情页”
  • 从发布页接入详情页，不需要再次返回进入发布页
  • 进入详情页后，依然需要保持之前的页面存在，进行正常返回

2.2、自定义tabBar跳转方式wx.reLaunch

使用效果

• 每次切换，都会关闭当前的所有页面，继而打开一个新页面
  • 如果使用wx.navigateTo，通过tabBar的切换，很快就会超过10个路由栈层级
  • 如果使用wx.redirectTo，存在路由栈超过10级的风险

tabBar使用页面

• 首页——'pages/index/index'
• 发布——'pages/publish/index'
• 个人中心——'pages/profile/index'

2.3、wx.reLaunch方式的使用

使用效果

• 关闭当前所有页面，打开一个新页面
• 路由栈层级级数变成1

使用页面

• tabBar组件
• 搜索页面，点击“取消/返回”按钮，进回“首页”
  • 如果该页面使用wx.navigateTo，则进入的“首页”header部分会显示“返回”图标
  • 如果该页面使用wx.redirectTo，反复执行“首页——搜索页——首页”这个操作路径，会导致层级达到10级
  • 该页面，也可以使用wx.navigateBack。在不清楚之后会有什么样交互的前提下，wx.reLaunch更加保险

2.4、wx.navigateBack方式的使用

使用条件

• 不需要返回到当前页面时
• 返回层级数目明确的情况下使用

使用效果

• 关闭当前页面，进入之前的页面
  • 在之前的页面点击返回按钮，不会再进入该页面
• 路由栈层级减少一级
  • 跟在当前页的路由栈层级比较起来，减少一级
  • 跟进入该页面之前比起来，路由栈层级不变

使用页面

• 发布页面，在编辑状态下，提交成功后，返回“该商品详情页”
• 发布页面，在编辑状态下，如果获取初始信息失败，返回“该商品详情页”
• 新增联系方式页面，提交成功后，返回“联系方式列表页面”

2.5、wx.navigateTo方式的使用

使用条件

• 需要返回到当前页面时，使用该方法

使用效果

• 保留当前页面，打开一个页面
  • 可以在新页面返回到当前页面
• 路由栈层级增加一级
• 谨慎使用

使用页面

• 首页推荐产品、搜索结果页，点击商品图片，进入“该商品详情页”
• 首页分类模块，点击“分类图标”，进入“搜索-结果页”
• 首页搜索模块，点击“搜索栏”，进入“搜索页”
• 商品详情页面，点击“管理——编辑”，进入“发布页面-编辑态”
• 搜索页面-模糊搜索结果，点击“商品标题”，进入“该商品详情页”
• 个人中心，进入“修改个人信息页面”、“反馈页面”、“进入联系方式页面”、“发布/收藏产品列表页面”
• 个人中心-我的发布、我的收藏页面，点击商品图片，进入“该商品详情页”
• 个人中心-联系方式页面，点击“新增按钮”，进入“新增页面”

三、注意事项

• 尽量保证每个跳转循环完成后，路由层级不会增加，最好只有一个路由层级
• 注意出现页面跳转循环的路径

四、分包

• app:首页 商品详情页
• 搜索
• 发布
• 个人中心

五、汇总思维导图