問題描述：

做微信h5頁面時，經過了微信授權才跳轉到一級默認路由home.vue中，因此在home頁面時在IOS中底部會出現虛擬的返回鍵，安卓上不會出現。且在IOS點擊返回時會跳轉到home空白頁面不重新加載，但是在安卓機上點擊返回鍵會重新加載。

實現功能：

解決IOS問題(在home頁面點返回時路由還是在home頁面，并完成重新加載)

分析：

需要在進入頁面時加入監(jiān)聽，并在頁面離開時移除監(jiān)聽。因為home頁面是個滾動列表，所以我采用了keep-alive路由緩存，所以不能在created()和beforeDestroy()生命周期中寫，因此我在home.vue中加了組件內的守衛(wèi)beforeRouteLeave ()在里面移除監(jiān)聽，在activated()中添加監(jiān)聽。
如果頁面沒有采用路由緩存，則監(jiān)聽事件和移除事件可以在created()和beforeDestroy()這兩個生命周期函數中寫。

注意：

addEventListener()與removeEventListener()用于處理指定和刪除事件處理程序操作。
它們都接受3個參數：事件名、事件處理的函數和布爾值。
布爾值參數是true，表示在捕獲階段調用事件處理程序；
如果是false，表示在冒泡階段調用事件處理程序。

相同事件綁定和解除，需要使用共用函數；如果removeEventListener不生效，可以看看這篇文章：https://blog.csdn.net/amyleeYMY/article/details/83382741

//監(jiān)聽返回按鈕，重新加載當前頁面
window.history.pushState(state, title, utl)//在頁面中創(chuàng)建一個 history 實體,直接添加到歷史記中。
參數：state：存儲一個對象，可以添加相關信息，可以使用 history.state 讀取其中的內容。
title：歷史記錄的標題（目前瀏覽器不支持）。
url：創(chuàng)建的歷史記錄的鏈接。進行歷史記錄操作時會跳轉到該鏈接。

最終代碼：

home.vue

activated(){
  //在頁面中創(chuàng)建一個 history 實體,當實體改變時會觸發(fā)popstate事件，跳轉到當前頁面，并重新加載當前頁面
  window.history.pushState(null, 'ff', document.URL);
  window.addEventListener('popstate',this.reload,true)
 }
 
 //本來在deactivated中寫移除事件監(jiān)聽的，但是發(fā)現不能移除，可能這個生命周期是在路由跳轉完(keep-alive緩存的組件停用時調用)從而找不到那個this了，所以移除監(jiān)聽失敗。
 deactivated(){
   window.removeEventListener('popstate',this.reload,true)
 }
 
 //所以采用組件內的路由守衛(wèi)beforeRouteLeave,成功解決了移除監(jiān)聽事件。
 beforeRouteLeave (to, from, next) {
  // 導航離開該組件的對應路由時調用
  window.removeEventListener('popstate',this.reload,true) //這個一定要寫到next()前面
  next()
 }
methods:{
reload(){
  window.location.reload()//重新加載
 }
}

main.js

import {Component} from "vue-property-decorator";
Component.registerHooks([
 'beforeRouteLeave',
]);

就這樣成功的解決IOS返回不刷新問題~歡迎小伙伴來交流

到此這篇關于vue中解決微信html5原生ios虛擬鍵返回不刷新問題的文章就介紹到這了,更多相關微信html5原生ios虛擬鍵返回不刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論