1. 聲明式導航（navigator組件）

聲明式導航通過在WXML頁面中使用 <navigator> 組件來實現頁面跳轉，使用起來較為直觀簡便，語法格式如下：

<navigator url="目標頁面路徑" open-type="跳轉類型">顯示的跳轉提示文本或內容</navigator>

其中關鍵屬性說明如下：

url屬性：指定要跳轉到的頁面路徑，路徑需以“/”開頭，例如“/pages/detail/detail”，代表跳轉到小程序根目錄下的“pages/detail/detail”頁面。

open-type屬性：用于定義跳轉的具體類型，常見的有以下幾種：

（1）navigateTo：

功能：保留當前頁面，新頁面會被添加到頁面棧中，用戶可通過返回按鈕返回之前的頁面。常用于從列表頁跳轉到詳情頁等場景，例如：

<navigator url="/pages/productDetail/productDetail?id=123" open-type="navigateTo">查看商品詳情</navigator>

在目標頁面（productDetail.js）中，可以在 onLoad 生命周期函數里獲取傳遞過來的參數：

Page({onLoad(options) {console.log(options.id); // 輸出 123}
})

（2）redirectTo：

功能：關閉當前頁面，然后跳轉到指定頁面，當前頁面會從頁面棧中移除，新頁面入棧。適用于像表單提交成功后跳轉到結果頁這類不需要返回上一頁的情況，例如：

<navigator url="/pages/submitSuccess/submitSuccess" open-type="redirectTo">提交成功，前往查看結果</navigator>

（3）switchTab：

功能：專門用于跳轉到小程序底部 tabBar 配置的頁面，跳轉時會關閉所有非 tabBar 頁面。比如從其他頁面切換回首頁（假設首頁是 tabBar 頁面），示例如下：

<navigator url="/pages/index/index" open-type="switchTab">返回首頁</navigator>

需注意，使用此方式跳轉的頁面路徑必須是在 app.json 中配置的 tabBar 頁面路徑。

（4）navigateBack：

功能：用于返回上一頁或者多級頁面，可通過 delta 屬性指定返回的頁面層數，默認值為 1。例如：

<navigator open-type="navigateBack">返回上一頁</navigator>
<navigator open-type="navigateBack" delta="2">返回上兩頁</navigator>

2. 編程式導航（API調用）

編程式導航通過在 JavaScript 文件中調用相應的微信小程序 API 來實現頁面跳轉，這樣可以在跳轉前進行更多復雜的邏輯判斷和操作，常用的 API 如下：

wx.navigateTo：功能與聲明式導航中 open-type="navigateTo" 一致，通過傳入包含 url 的對象參數來實現跳轉，示例代碼如下：

Page({goToDetail() {wx.navigateTo({url: "/pages/detail/detail"});}
})

在對應的 WXML 文件中綁定點擊事件來觸發這個函數，比如：

<button bind:tap="goToDetail">跳轉到詳情頁</button>

wx.redirectTo：等同于聲明式導航里的 open-type="redirectTo"，示例如下：

Page({goToNextPage() {wx.redirectTo({url: "/pages/nextPage/nextPage"});}
})

wx.switchTab：用于跳轉到 tabBar 頁面，使用方式如下：

Page({goToHome() {wx.switchTab({url: "/pages/index/index"});}
})

wx.navigateBack：與聲明式導航的對應功能相同，可按指定層數返回頁面，示例：

Page({goBack() {wx.navigateBack({delta: 1});}
})

并且，編程式導航在跳轉前可以進行各種邏輯判斷，比如判斷用戶是否登錄，只有登錄了才允許跳轉到某些頁面：

Page({jumpToPersonalPage() {const isLoggedIn = wx.getStorageSync('userToken'); // 假設從本地存儲獲取登錄狀態if (isLoggedIn) {wx.navigateTo({url: "/pages/personal/personal"});} else {wx.showToast({title: '請先登錄',icon: 'none'});setTimeout(() => {wx.navigateTo({url: "/pages/login/login"});}, 2000);}}
})

3. 頁面棧管理

微信小程序的頁面棧用于記錄用戶訪問過的頁面順序，每個小程序有一個頁面棧，最多可容納 10 個頁面。可以通過 getCurrentPages() 函數獲取當前頁面棧的實例數組，例如：

const pages = getCurrentPages();
console.log(pages.length); // 輸出當前頁面棧的頁面數量
const currentPage = pages[pages.length - 1]; // 獲取當前頁面實例
const prevPage = pages[pages.length - 2]; // 獲取上一頁面實例（常用于反向傳遞數據）

利用頁面棧，在子頁面返回父頁面時，可以將數據傳遞回去，示例如下：

// 子頁面（假設為 childPage.js）
Page({backToParentAndPassData() {const pages = getCurrentPages();const prevPage = pages[pages.length - 2];const dataToPass = { message: '這是從子頁面傳遞的數據' };prevPage.setData({ receivedData: dataToPass });wx.navigateBack();}
})// 父頁面（假設為 parentPage.js）
Page({data: {receivedData: null}
})