正常的頁面跳轉的api大家應該都清楚，但是涉及到多頁面來回跳轉以及返回到導航頁的時候就需要一些技巧來進行處理，之前找了挺多文章也沒有很詳細的介紹，本文就詳細說說頁面跳轉的那些事。

1.uniapp常用跳轉API

2.微信小程序頁面跳轉API

3.其他頁面跳轉回tabbar頁面的方法

以這個小程序舉例，在這個頁面可以看到通過點擊這些跳轉后的頁面返回時都得返回現(xiàn)在這個頁面。

以入庫記錄為例，進去后又有很多的跳轉，比如點擊某條記錄跳轉到了詳情頁，其中點擊了編輯又跳轉到了另一個編輯頁面，編輯完成后肯定得跳轉回這個頁面，這時候問題來了，直接返回的話就不是跳轉回我們想要的tabbar頁面了，因為棧中還存在其他的頁面，需要一層層的出棧?？赡苡腥藭f可以使用navigateBack，使用這個是可以跳回來，但是無法刷新頁面，還得在onShow生命周期再發(fā)起一次請求。而且需要自己算跳幾次也比較麻煩。這時候我們就可以使用這個生命周期onBackPress

我們通過清空頁面棧并且跳轉回tabbar來達到我們想要的效果，這個最后的return true非常關鍵，如果不寫就達不到跳轉到我們想要的頁面的效果。當然使用這個生命周期不是只能跳回到tabbar頁面，這個生命周期是監(jiān)聽返回的事件，我們也可以跳轉到其他的頁面，只需要把switchTab換成redirectTo即可。

onBackPress() {
        uni.switchTab({
                url: '/pages/manage/manage'
        })
        return true
},

這個生命周期是有參數傳進入來的，我們可以避免掉通過navigateBack跳過來的頁面，否則容易出問題

onBackPress(options) {
    if (options.from === 'navigateBack') { 
        return false    
    } 
    uni.redirectTo({ url: '/page/index' }) 
    return true
},

然而這個生命周期只適用APP，H5和支付寶小程序，微信小程序是不支持這個api的，這時候我們就得專門對微信小程序做處理。onUnload生命周期是所有端都通用的，我們只需要在頁面卸載時調用微信原生的跳轉到tabbar的api即可實現(xiàn)我們的效果，這樣就可以多端都保持一致。

onUnload() {
        //#ifdef MP-WEIXIN
        wx.switchTab ({
                url: '/pages/manage/manage'
        })
        //#endif
},

4.頁面來回跳轉保持數據的方法

一個頁面跳轉到另一個頁面拿到數據后回到原先頁面數據還需要維持原先的樣子怎么來處理，這個時候就需要navigateBack和getCurrentPages結合起來了使用了。

舉個例子，我希望在填寫完入庫日期備注后通過點擊手動跳轉到物資選擇頁面來去選擇對應的物資進行入庫，這時候如果通過常規(guī)的跳轉的方式再次回到原先頁面，那么之前填寫的日期備注等數據就已經重置了，這并不是我們所期望的。

我們跳轉到物資選擇頁面可以使用navigateTo

uni.navigateTo({
    url: item.url,
})

在物資選擇頁面通過獲取頁面棧實例的方式拿到上一個頁面，當我們選擇完畢后將數據保存到原先頁面定義的data中去，最后通過navigateBack回到上一個頁面，那么上一個頁面之前填寫的內容和現(xiàn)在選擇完后的內容就都有了。

    // 獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。
    const pages = getCurrentPages() 
    const prevPage = pages[pages.length - 2] //上一個頁面
    //#ifdef H5
    prevPage._data.selectData = this.selectMaterial
    //#endif
    //小程序中的修改方法
    // #ifndef H5
    prevPage.$vm._data.selectData = this.selectMaterial
    //#endif
    uni.navigateBack() //返回上一頁面

本人也是剛接觸uniapp不久，寫的有問題的地方還望各位大佬指出，本文只是當自身的踩坑記錄。如果對各位有幫助再好不過。

到此這篇關于淺談uniapp頁面跳轉的解決方案的文章就介紹到這了,更多相關uniapp頁面跳轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論