從外鏈回退到vue應用不觸發生命週期、beforeRouterEnter等鉤子函數的問題

在iphoneX及以上版本從外鏈回退不觸發事件,7P,7沒發現這個bug
安卓上自測沒有發現這個問題

最近作項目中發現了一個問題,iphoneX及以上版本從當前vue應用中跳轉到外部連接而後在回退到vue應用裏面,beforeRouterEnter沒有被觸發。html

因爲在其餘手機上測試沒有問題,因此一開始我覺得代碼寫的有問題,而後就開始漫長的找坑之路,後來我將事件放到了created、mounted裏面也沒有執行代碼,那就證實有可能頁面被緩存了,因此這些鉤子沒有觸發。vue

因此百度了一下,找到了onpageshow這個事件瀏覽器

onpageshow 事件在用戶瀏覽網頁時觸發。
onpageshow 事件相似於 onload事件,onload 事件在頁面第一次加載時觸發, onpageshow 事件在每次加載頁面時觸發,即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。

也就是當頁面顯示到前臺的時候就觸發pageshow這個事件,因此我就在created裏面註冊了這個事件並將要執行的代碼寫進去,再次真機調試以後發現解決這個問題了。緩存

created () {
    window.addEventListener('pageshow', () => {
        //外鏈回退到vue應用要執行的代碼
    })
}

記錄下來避免之後再次跳坑iphone

相關文章
相關標籤/搜索