摘要:最近都在用做內(nèi)嵌頁面,在點擊后退時如果在路由中跳轉(zhuǎn)過多次點后退會后退很多次才能退出頁面用戶體驗很差。同時,這些方法會和事件一起工作。
最近都在用vue做APP內(nèi)嵌H5頁面,在APP點擊后退時如果在路由中跳轉(zhuǎn)過多次 點后退會后退很多次才能退出頁面 用戶體驗很差。
下面來說下解決方法
因為hisotry模式官方說需要服務(wù)器配置所以路由一直在用hash模式,針對這一需求需要了解h5新加的history模式
H5引入了history.pushState()和history.replaceState()這兩個方法,他們允許添加和修改history實體。同時,這些方法會和window.onpostate事件一起工作。
pushState方法用一個新的url取代當(dāng)前頁面的url并把當(dāng)前頁面的url存進歷史記錄,
replaceState只用新url取代當(dāng)前頁面的url,但是不把當(dāng)前頁面的url存進歷史記錄
pushState()有三個參數(shù):state對象,標題字符串(現(xiàn)在沒有瀏覽器支持),URL字符串(可選,如果為空,設(shè)置為當(dāng)前頁面的url)
只有前進后退可以觸發(fā)popstate事件,對于不是通過pushState,replaceState兩個方法產(chǎn)生的url,state對象為空
所以首先監(jiān)聽一下popstate事件在監(jiān)聽事件里直接調(diào)回退的方法
window.addEventListener("popstate", function(e) { window.history.back() }, false);
這樣就可以直接退出當(dāng)前頁面了
還要history在服務(wù)器端渲染不出來的問題 前端其實也可以用一種笨方法解決的
把你服務(wù)器的地址直接卸載路由里,根路徑要把你頁面的名字帶上,就像這樣
因為在APP里所以也不存在刷新頁面找不到的問題,就不需要服務(wù)端來幫忙啦~
希望可以幫到有類似需求的小伙伴,有更好的方法的大神也來指導(dǎo)下
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/91817.html
摘要:前言微信小程序中可以直接運行頁面,這一新組件的產(chǎn)生,可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務(wù)域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責(zé)任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面,這一新組件 web-view 的產(chǎn)生,可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型,微信小程序后臺...
摘要:但好在中,新增了屬性,可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補充資料視頻播放優(yōu)化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上,APP 都是使用的系統(tǒng)自帶的瀏覽器進行頁面渲染,video 播放視頻的效果是統(tǒng)一的,只需要考慮不同的 iOS ...
閱讀 3464·2023-04-25 19:39
閱讀 3817·2021-11-18 13:12
閱讀 3642·2021-09-22 15:45
閱讀 2441·2021-09-22 15:32
閱讀 726·2021-09-04 16:40
閱讀 3739·2019-08-30 14:11
閱讀 1893·2019-08-30 13:46
閱讀 1574·2019-08-29 15:43