vue單頁緩存存在的問題及解決方案(小結(jié))
1.css同名覆蓋,解決方法：父組件加上scoped
<style lang="scss" scoped> @import './unbind.scss' </style>
子組件同名樣式加上deep
/deep/ .tabs-row {
.items-wrp{
padding-left: .34rem;
}
.item {
margin:0 .12rem .16rem 0;
}
}
2.事件全局綁定
綁在window或document或body上的事件，切換到下一個頁面同樣會被觸發(fā)，需要銷毀，也防止內(nèi)存泄漏,全局綁定的事件如果是公用組件慎用off().on(),因?yàn)榭赡芤玫钠渌慕M件全局綁定的事件被移除
destroyed：返回的時(shí)候會觸發(fā)，防止返回到上一頁時(shí)window上scroll被觸發(fā)，官網(wǎng)上是推薦在beforeDestroy做事件移除或者新增DOM或移動DOM操作
deactivated：前進(jìn)到新頁面時(shí)會觸發(fā)，防止進(jìn)入下一頁時(shí)window上scroll被觸發(fā)
activated：被緩存的頁面激活，即返回時(shí)被觸發(fā)，created此時(shí)不會被觸發(fā)，重新綁定事件
activated () {
// 不直接綁定scroll，此處有限制
this.bindEvent()
},
destroyed () {
$(window).off('scroll', this.handleScrollFn)
},
deactivated () {
$(window).off('scroll', this.handleScrollFn)
},
3.音頻續(xù)播
當(dāng)音頻在還在播放時(shí)，跳轉(zhuǎn)到新的頁面，此時(shí)音頻仍在播放，解決方法：前進(jìn)到新頁面會觸發(fā)deactivated鉤子，此時(shí)暫停音頻播放
deactivated () {
// 前進(jìn)時(shí)暫停音頻播放
this.pauseAudio()
},
methods: {
pauseAudio () {
this.$refs.audioPlayer && this.$refs.audioPlayer.togglePlay()
}
}
當(dāng)音頻在還在播放時(shí)，返回上一頁，此時(shí)音頻仍在播放，解決方法：返回會觸發(fā)destroyed鉤子里邊關(guān)閉音頻播放器
destroyed () {
this.closeMini() //關(guān)閉音頻播放器
},
methods: {
closeMini () {
this.mode = -1
this.play = false
if (this.player) {
this.player.pause()
}
this.$emit('callback', 'close')
},
}
4.微信分享數(shù)據(jù)未更新
當(dāng)返回上一頁時(shí)，分享的數(shù)據(jù)沒有更新，需要在激活的鉤子里再次讀取之前存的分享數(shù)據(jù)
activated () {
// 單頁緩存分享數(shù)據(jù)重置
this.setShare(this.shareCache)
window.addEventListener('scroll', this.finishReading)
},
methods: {
setShare (opt) {
if (!opt) return
baike.setShare && baike.setShare(opt)
//存該頁的分享數(shù)據(jù)
this.shareCache = opt
},
}
5.router.afterEach里上報(bào)pv時(shí)url未更新
在導(dǎo)航守衛(wèi)afterEach里邊上報(bào)，但是被觸發(fā)時(shí)url還未更新，導(dǎo)致上報(bào)的參數(shù)有誤，解決方法：通過to,from得到下一頁，上一頁的地址
var referrer = !from.name ? document.referrer :
`${location.origin}${from.fullPath}` // 通過from.name判斷刷新
var curUrl = `${location.origin}${to.fullPath}` || ''
6.hash改變時(shí)并不會觸發(fā)router的守衛(wèi)
代碼中通過hash改變，監(jiān)聽hashchange來處理之后的邏輯，但是就不會觸發(fā)router的導(dǎo)航守衛(wèi)，也就是沒有跳轉(zhuǎn)，就不存在單頁緩存
window.location.hash = '#refer'
解決辦法：用replace替換url,相應(yīng)的原來hashchange就不會監(jiān)聽到，需要把這塊邏輯拿到created里邊執(zhí)行
this.$router.replace({path: `${location.pathname}${location.search}#refer`})
7.分享問題修復(fù)
單頁緩存導(dǎo)致返回時(shí)分享的鏈接和自定義文案沒有更新，針對特別處理的分享數(shù)據(jù)，在業(yè)務(wù)頁面修改，解決方法
activated () {
this.setShare(this.shareCache)
},
methods: {
setShare (opt) {
if (!opt) return
// xx.setShare封裝的分享的底層方法
xx.setShare && xx.setShare(opt)
this.shareCache = opt
}
}
針對普通分享頁面,在router.afterEach里加
router.afterEach((to, from) => {
Vue.nextTick(() => {
if (to.meta.notNeedShare) { //不需要分享的頁面在路由配置文件里增加{meta: {notNeedShare:true}}
if (window.WeixinJSBridge) {
window.WeixinJSBridge.call('hideOptionMenu')
}
else {
document.addEventListener('WeixinJSBridgeReady', () => { window.WeixinJSBridge.call('hideOptionMenu') })
}
}
else {
// 非分享自定義數(shù)據(jù)的頁面處理
xx.setShare({ link: `${location.origin}${to.fullPath}` })
}
})
})
8.關(guān)注，收藏等toast提示在返回時(shí)未消失，因?yàn)檠舆t時(shí)間設(shè)置，解決方法：在路由鉤子里邊強(qiáng)制隱藏
router.afterEach((to, from) => {
// 切換路由，有toast提示立刻隱藏
xx.toast.hide()
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue $emit $refs子父組件間方法的調(diào)用實(shí)例
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
利用Vue Native構(gòu)建移動應(yīng)用的全過程記錄
VueNative是一個使用JavaScript構(gòu)建跨平臺原生移動應(yīng)用程序的框架m這篇文章主要給大家介紹了關(guān)于如何利用Vue Native構(gòu)建移動應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08
在Vue3中,this的使用方式與Vue2存在較大差異,尤其是在引入組合式API后,本文詳細(xì)解析了Vue3中this的使用情況、底層源碼和設(shè)計(jì)理念,并提供了面試技巧,感興趣的可以了解一下2024-09-09
本文主要介紹了vite.config.js配置入門詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應(yīng)用，它是?HTML5?版本的?saveAs()?FileSaver?實(shí)現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導(dǎo)出文件,需要的朋友可以參考下2023-09-09
在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決
這篇文章主要介紹了在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue 頁面切換效果之 BubbleTransition(推薦)
使用 vue，vue-router，animejs 來講解如何實(shí)現(xiàn)vue頁面切換效果之 BubbleTransition，需要的朋友參考下吧2018-04-04
Vue中"This dependency was not found"問題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問題的解決方法,需要的朋友可以參考下2018-06-06
vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問題
這篇文章主要介紹了vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07