最近在做小程序的跳轉,發現navigateTo的跳轉無法滿足業務需求,所以特地記錄下
業務需求
類似一個淘寶的在訂單界面選擇地址的功能,從A頁面點擊跳轉到B頁面的地址列表頁面,B頁面可以選擇已有的地址跳轉到A也可以選擇添加地址跳轉到新的新增地址的表單提交頁C。在新增完地址點確定按鈕返回到地址列表頁B,從B中選擇企業返回到最初的A頁面。
選擇地址頁面由於很多地方要用到所以考慮把B頁面作為一個通用模塊頁面,其他很多頁面在選擇地址都進入這個B,最終選擇企業再到原頁面A,所以B返回A用的是navaigateBack返回上一層。
問題產生與解決
一開始用的都是NavigateTo的跳轉方式,后來發現在C頁面跳轉到B頁面時,B頁面在選擇地址時會返回上一層也就是C,這和事先的需求不一樣(選擇地址返回到最初的A頁面)。這個問題很快就能想到是因為B頁面的navaigateBack返回上一層也就是C作為跳轉的頁面。那么如何既保留navaigateBack的返回上一層又能不跳回C頁面呢?
這里就涉及到一個頁面堆棧的概念。NavigateTo的方式是將原始頁面(跳轉前的當前頁面)和新頁面入棧,在navaigateBack返回是從頁面堆棧中查詢到路徑進行返回。而redirectTo是將原始頁面(跳轉前的當前頁面)進行出棧,也就是說當前頁面不放進頁面堆棧中,新頁面依舊入棧。
那我現在的情景就適合用redirectTo來對C進行跳轉,也就是說上圖中的2和3的步驟都是用redirectTo來進行跳轉,到最后返回到B頁面的時候C是不在頁面堆棧中的,此時堆棧中的只有A和B,就能通過navaigateBack順利的返回到A頁面了。
總結
redirectTo:當前頁面不入棧,新頁面入棧
navigateTo:當前頁面和新頁面入棧
小程序的頁面棧最大能存放十個頁面,當頁面棧中的頁面等於10時,在使用navigateTo這種方式是不能再跳頁的,頁面很多的情況下建議使用redirectTo。
再放張圖:
再放一個關於小程序頁面跳轉的博客鏈接:https://www.cnblogs.com/bushui/p/11638369.html