問(wèn)題描述：

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

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

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

分析：

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

注意：

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

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

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

最終代碼：

home.vue

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

main.js

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

就這樣成功的解決IOS返回不刷新問(wèn)題~歡迎小伙伴來(lái)交流

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

最新評(píng)論