基於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>

 

總結：上面的路由有關的跳轉方式和路由攔截，基本可以滿足項目的需求。后面有遇到特別的應用場景可以加進去。