本文編輯：  心城瀏覽 4331 1 版權所有，嚴禁轉載

接口說明:

對頁面的切換的操作,實現頁面之間的跳轉

接口用法：

 wx.navigateTo(OBJECT),對頁面的跳轉,保留當前頁,但是為了不讓用戶在使用小程序時造成困擾，騰訊規定頁面路徑只能是五層，請盡量避免多層級的交互方式。
wx.navigateBack(OBJECT),關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層

【圖片】

【代碼】

wxml

<!--index-->
<view class="container">
<button bindtap="navigateTo">跳轉到新界面</button>
</view>
<!-- navigator.wxml -->
<view> 點擊左上角返回回到之前頁面 </view>
<view>跳轉攜帶的數據:{{id}}</view>
<button bindtap="back">返回界面</button>

js

//index
navigateTo:function(){
    wx.navigateTo({
      url: 'navigate?id=1'
    })
  }
//navigator
back:function(){
    console.info(getCurrentPages() );
    wx.navigateBack({
    delta: 1
  })
  }

wx.redirectTo(OBJECT),關閉當前頁面，跳轉到應用內的某個頁面
【圖片】

【代碼】

wxml

<!--index-->
<view class="container">
<button bindtap="navigateTo">跳轉到新界面</button>
<button bindtap="redirectTo">跳轉到新界面redirectTo</button>
</view>
<!-- navigator.wxml -->
<view> 左上角并沒有返回的按鈕 </view>
<view>跳轉攜帶的數據:{{id}}</view>
<button bindtap="back">返回界面</button>

js

//index
redirectTo:function(){
  wx.redirectTo({
     url: 'navigate?id=1'
  })
  }

wx.switchTab(OBJECT),跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
【圖片】

【代碼】

wxml

<!--index-->
<view class="container">
<button bindtap="navigateTo">跳轉到新界面</button>
<button bindtap="redirectTo">跳轉到新界面redirectTo</button>
</view>
<!-- navigator.wxml -->
<button bindtap="toTabBar">返回TabBar</button>

js

//index
redirectTo:function(){
  wx.redirectTo({
     url: 'navigate?id=1'
  })
  }
//navigator
toTabBar :function(){
   wx.switchTab({
    url: '/pages/index/index'//一定注意要在前面加上/
  })
  }

json

{
  "pages":[
    "pages/index/index",
    "pages/index/navigate",
    "pages/index/redirect",
    "pages/index/index2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " navigator測試",
    "navigationBarTextStyle":"black"
  },
    "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/index/index2",
      "text": "index2"
    }]
  }
}

主要方法：

【wx.navigateTo(OBJECT)】：【跳轉到另一頁面并保留當前的頁面】

【方法內容描述】

//跳轉頁面
wx.navigateTo({
  url: 'test?id=1'
})
//test 跳轉到的頁面
Page({
  onLoad: function(option){
    console.log(option.id)
  }
})

【wx.redirectTo(OBJECT)】：【關閉當前頁面，跳轉到應用內的某個頁面】

【方法內容描述】

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

【wx.switchTab(OBJECT)】：【跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面】

【方法內容描述】

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

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

特別提醒,請在url前面加上/

【wx.navigateBack(OBJECT)】：【關閉當前頁面，返回上一頁面或多級頁面】

【方法內容描述】

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

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

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

// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
  delta: 2
})

特別提示:
wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面，只能用 wx.switchTab 跳轉到 tabbar 頁面