基于Taro开发小程序笔记--04路由跳转的几种方式

• wx.navigateTo

带单个字符参数xxx
wx.navigateTo({
  url: 'page/home/home?params=xxx'
})

带字符串对象Object

wx.navigateTo({
  url: 'page/home/home?params=JSON.stringify(Object)' })

注意: 保留当前页面，跳转到应用内的某个页面，调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，使用wx.navigateBack可以返回到上一级页面。 

• wx.navigateBack

wx.navigateBack({
  delta: 2
})

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

• wx.redirectTo

wx.redirectTo({
  url: 'page/home/home?params=xxx'
})

注意： 关闭当前页面，跳转到应用内的某个页面。当前页面将不在路由堆中。

• wx.switchTab

wx.switchTab({
  url: 'page/tab/tab1'
})

注意：跳转到tabBar选中的页面，同时关闭其他非tabBar页面。

• wx.reLanch

wx.reLanch({
  url: 'page/home/home?params=xxx'
})

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

• getCurrentPages() 获取当前的页面栈

// 当前页面中
var pagesArray = wx.getCurrentPages();
pagesArray.map((item) => {
// 可以为上级的home页面设置一个data数据标识isRouteId, 这样可以在home页面中通过路由获取到 
  if (item.route.indexOf('home') != -1) {
    item.setData({
      isRouteId: '2'
    })
  }
})

//home页面中
componentDidShow() {
  // 获取当前路由判断是否要返回上一页
  var curpages = wx.getCurrentPages();
  curpages.map((item) => {
    if (item.route.indexOf('xxx') != -1) {
      if (item.data.isRouteId == '2') {
        Taro.redirectTo({
          url: '/pages/bbb/aaa'
        })
      }
    }
  })
}

•  在页面组件中跳转（可以通过设置open-type属性指明页面跳转方式）

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/pages/home/home?params=xxxx">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="/pages/xx/xx" open-type="redirect">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/pages/index/index" open-type="switchTab">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="/pages/xxx/xxxx" open-type="reLanch">关闭所有页面，打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/pages/index/index" open-type="navigateBack">关闭当前页面，返回上一级页面或多级页面</navigator>

总结：上面的路由有关的跳转方式和路由拦截，基本可以满足项目的需求。后面有遇到特别的应用场景可以加进去。