問題描述：

做微信h5頁面時，經(jīng)過了微信授權(quán)才跳轉(zhuǎn)到一級默認(rèn)路由home.vue中，因此在home頁面時在IOS中底部會出現(xiàn)虛擬的返回鍵，安卓上不會出現(xiàn)。且在IOS點(diǎn)擊返回時會跳轉(zhuǎn)到home空白頁面不重新加載，但是在安卓機(jī)上點(diǎn)擊返回鍵會重新加載。

實(shí)現(xiàn)功能：

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

分析：

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

注意：

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

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

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

最終代碼：

home.vue

activated(){
  //在頁面中創(chuàng)建一個 history 實(shí)體,當(dāng)實(shí)體改變時會觸發(fā)popstate事件，跳轉(zhuǎn)到當(dāng)前頁面，并重新加載當(dāng)前頁面
  window.history.pushState(null, 'ff', document.URL);
  window.addEventListener('popstate',this.reload,true)
 }
 
 //本來在deactivated中寫移除事件監(jiān)聽的，但是發(fā)現(xiàn)不能移除，可能這個生命周期是在路由跳轉(zhuǎn)完(keep-alive緩存的組件停用時調(diào)用)從而找不到那個this了，所以移除監(jiān)聽失敗。
 deactivated(){
   window.removeEventListener('popstate',this.reload,true)
 }
 
 //所以采用組件內(nèi)的路由守衛(wèi)beforeRouteLeave,成功解決了移除監(jiān)聽事件。
 beforeRouteLeave (to, from, next) {
  // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
  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返回不刷新問題~歡迎小伙伴來交流

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

最新評論