問題描述：
做微信h5頁面時，經過了微信授權才跳轉到一級默認路由home.vue中，因此在home頁面時在IOS中底部會出現虛擬的返回鍵，安卓上不會出現。且在IOS點擊返回時會跳轉到home空白頁面不重新加載，但是在安卓機上點擊返回鍵會重新加載。
實現功能：
解決IOS問題(在home頁面點返回時路由還是在home頁面，并完成重新加載)
分析：
需要在進入頁面時加入監聽，并在頁面離開時移除監聽。因為home頁面是個滾動列表，所以我采用了keep-alive路由緩存，所以不能在created()和beforeDestroy()生命周期中寫，因此我在home.vue中加了組件內的守衛beforeRouteLeave ()在里面移除監聽，在activated()中添加監聽。
如果頁面沒有采用路由緩存，則監聽事件和移除事件可以在created()和beforeDestroy()這兩個生命周期函數中寫。
注意：
addEventListener()與removeEventListener()用于處理指定和刪除事件處理程序操作。
它們都接受3個參數：事件名、事件處理的函數和布爾值。
布爾值參數是true，表示在捕獲階段調用事件處理程序；
如果是false，表示在冒泡階段調用事件處理程序。
相同事件綁定和解除，需要使用共用函數；如果removeEventListener不生效，可以看看這篇文章：https://blog.csdn.net/amyleeYMY/article/details/83382741
//監聽返回按鈕，重新加載當前頁面
window.history.pushState(state, title, utl)//在頁面中創建一個 history 實體,直接添加到歷史記中。
參數：state：存儲一個對象，可以添加相關信息，可以使用 history.state 讀取其中的內容。
title：歷史記錄的標題（目前瀏覽器不支持）。
url：創建的歷史記錄的鏈接。進行歷史記錄操作時會跳轉到該鏈接。
最終代碼：
home.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
activated(){ //在頁面中創建一個 history 實體,當實體改變時會觸發popstate事件，跳轉到當前頁面，并重新加載當前頁面 window.history.pushState(null, 'ff', document.URL); window.addEventListener('popstate',this.reload,true) } //本來在deactivated中寫移除事件監聽的，但是發現不能移除，可能這個生命周期是在路由跳轉完(keep-alive緩存的組件停用時調用)從而找不到那個this了，所以移除監聽失敗。 deactivated(){ window.removeEventListener('popstate',this.reload,true) } //所以采用組件內的路由守衛beforeRouteLeave,成功解決了移除監聽事件。 beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調用 window.removeEventListener('popstate',this.reload,true) //這個一定要寫到next()前面 next() }methods:{reload(){ window.location.reload()//重新加載 }} |
main.js
|
1
2
3
4
|
import {Component} from "vue-property-decorator";Component.registerHooks([ 'beforeRouteLeave',]); |
就這樣成功的解決IOS返回不刷新問題~歡迎小伙伴來交流
到此這篇關于vue中解決微信html5原生ios虛擬鍵返回不刷新問題的文章就介紹到這了,更多相關微信html5原生ios虛擬鍵返回不刷新內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_44824839/article/details/109163614
