2020-03-07 09:02:56 編程手札

什麼是路由

前端的路由是對一個路徑的解析，允許用戶通過不同的路徑訪問不同的內容。當用戶在頁面上點擊一個或跳轉頁面的內容時，系統會根據該內容所攜帶的路徑地址來跳轉到對應的頁面並呈現給用戶。小程序中所有頁面的路由全部由框架進行管理，框架以

棧的形式維護了當前的所有頁面。當跳轉的頁面無需進行數據交互時我們就可以很好的避免沒必要的後端服務器請求，降低服務器壓力。

什麼是棧

棧（stack）是一種運算受限的線性結構存儲表，棧的開口端被稱為棧頂而封閉端被稱為棧底。這樣棧就只能從表的開口端存取數據，無論是存數據還是取數據都必須遵循"先進後出"的原則。向棧中添加元素的過程被稱為"進棧"，從棧中提取出元素的過程被稱為"出棧"（會把該元素從棧中刪除）。小程序中通過棧來管理所有頁面，這就意味著小程序中可以跳轉新頁面、可以後退，但是不能前進。

如何獲取棧中的路由

小程序提供了getCurrentPages() 函數用於獲取當前頁面棧的實例，結果以數組形式按棧的順序輸出，第一個元素為首頁，最後一個元素為當前頁面。

需要注意的是：不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。也不要在onLaunch中調用 getCurrentPages()，因為此時頁面還沒有生成（參考文章：）。

路由跳轉方式

小程序為我們提供了5中路由跳轉方式（每種方式都支持API調用和組件調用），他們分別為打開新頁面、頁面重定向、頁面返回、Tab 切換、重啟動。這裡需要注意的是Tab 切換中的路由狀態，Tab頁之間切換頁面並沒有直接銷燬而是隱藏了，而頁面跳轉Tab頁時該頁面會被銷燬只顯示當前Tab頁。

路由的用法

使用組件跳轉我們可以在navigator定義open-type屬性來指定跳轉方式，並通過url屬性告訴系統將要跳轉的新頁面路由。

這裡需要注意的是當open-type屬性為navigateBack類型時無需指定url屬性，系統會從棧中去提取上一個路由。

使用API跳轉時navigateTo（可帶參）是最常用的路由跳轉，新頁面會加入到棧並允許返回；redirectTo（不可帶參）則會關閉當前頁面並跳轉到新頁面，但是當前頁面不會加入到棧（不允許返回）；switchTab（不可帶參）用於tabBar頁面跳轉專用，跳轉時其他頁面會出棧而新頁面會入棧；navigateBack（不可帶參）只能返回到頁面棧中存在的頁面，返回時頁面不斷出棧直到到達目標頁；reLaunch（可帶參）或關閉所有頁面（包括tabBar頁面），然後再打開一個新頁面。

路由傳參

使用組件跳轉時可以在url屬性中附帶上參數即可，使用API跳轉時我們可以在標籤組件中傳入data-*自定義屬性，當該組件觸發事件時會將該屬性值發送給事件處理函數。函數拿到該屬性值之後就可以根據你發送的請求類型來發送對應的數據格式給後端，如果是GET請求可以將參數拼接在URL上發送給後端，如果是POST請求可以將參數轉成JSON對象發送給後端。