vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(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上的事件，切換到下一個(gè)頁(yè)面同樣會(huì)被觸發(fā)，需要銷(xiāo)毀，也防止內(nèi)存泄漏,全局綁定的事件如果是公用組件慎用off().on(),因?yàn)榭赡芤玫钠渌慕M件全局綁定的事件被移除
destroyed：返回的時(shí)候會(huì)觸發(fā)，防止返回到上一頁(yè)時(shí)window上scroll被觸發(fā)，官網(wǎng)上是推薦在beforeDestroy做事件移除或者新增DOM或移動(dòng)DOM操作
deactivated：前進(jìn)到新頁(yè)面時(shí)會(huì)觸發(fā)，防止進(jìn)入下一頁(yè)時(shí)window上scroll被觸發(fā)
activated：被緩存的頁(yè)面激活，即返回時(shí)被觸發(fā)，created此時(shí)不會(huì)被觸發(fā)，重新綁定事件
activated () {
// 不直接綁定scroll，此處有限制
this.bindEvent()
},
destroyed () {
$(window).off('scroll', this.handleScrollFn)
},
deactivated () {
$(window).off('scroll', this.handleScrollFn)
},
3.音頻續(xù)播
當(dāng)音頻在還在播放時(shí)，跳轉(zhuǎn)到新的頁(yè)面，此時(shí)音頻仍在播放，解決方法：前進(jìn)到新頁(yè)面會(huì)觸發(fā)deactivated鉤子，此時(shí)暫停音頻播放
deactivated () {
// 前進(jìn)時(shí)暫停音頻播放
this.pauseAudio()
},
methods: {
pauseAudio () {
this.$refs.audioPlayer && this.$refs.audioPlayer.togglePlay()
}
}
當(dāng)音頻在還在播放時(shí)，返回上一頁(yè)，此時(shí)音頻仍在播放，解決方法：返回會(huì)觸發(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)返回上一頁(yè)時(shí)，分享的數(shù)據(jù)沒(méi)有更新，需要在激活的鉤子里再次讀取之前存的分享數(shù)據(jù)
activated () {
// 單頁(yè)緩存分享數(shù)據(jù)重置
this.setShare(this.shareCache)
window.addEventListener('scroll', this.finishReading)
},
methods: {
setShare (opt) {
if (!opt) return
baike.setShare && baike.setShare(opt)
//存該頁(yè)的分享數(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ù)有誤，解決方法：通過(guò)to,from得到下一頁(yè)，上一頁(yè)的地址
var referrer = !from.name ? document.referrer :
`${location.origin}${from.fullPath}` // 通過(guò)from.name判斷刷新
var curUrl = `${location.origin}${to.fullPath}` || ''
6.hash改變時(shí)并不會(huì)觸發(fā)router的守衛(wèi)
代碼中通過(guò)hash改變，監(jiān)聽(tīng)hashchange來(lái)處理之后的邏輯，但是就不會(huì)觸發(fā)router的導(dǎo)航守衛(wèi)，也就是沒(méi)有跳轉(zhuǎn)，就不存在單頁(yè)緩存
window.location.hash = '#refer'
解決辦法：用replace替換url,相應(yīng)的原來(lái)hashchange就不會(huì)監(jiān)聽(tīng)到，需要把這塊邏輯拿到created里邊執(zhí)行
this.$router.replace({path: `${location.pathname}${location.search}#refer`})
7.分享問(wèn)題修復(fù)
單頁(yè)緩存導(dǎo)致返回時(shí)分享的鏈接和自定義文案沒(méi)有更新，針對(duì)特別處理的分享數(shù)據(jù)，在業(yè)務(wù)頁(yè)面修改，解決方法
activated () {
this.setShare(this.shareCache)
},
methods: {
setShare (opt) {
if (!opt) return
// xx.setShare封裝的分享的底層方法
xx.setShare && xx.setShare(opt)
this.shareCache = opt
}
}
針對(duì)普通分享頁(yè)面,在router.afterEach里加
router.afterEach((to, from) => {
Vue.nextTick(() => {
if (to.meta.notNeedShare) { //不需要分享的頁(yè)面在路由配置文件里增加{meta: {notNeedShare:true}}
if (window.WeixinJSBridge) {
window.WeixinJSBridge.call('hideOptionMenu')
}
else {
document.addEventListener('WeixinJSBridgeReady', () => { window.WeixinJSBridge.call('hideOptionMenu') })
}
}
else {
// 非分享自定義數(shù)據(jù)的頁(yè)面處理
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()
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解析vue?3.0?使用axios庫(kù)發(fā)起?post?get?的配置過(guò)程
get post 請(qǐng)求開(kāi)發(fā)中最普通最常見(jiàn)的請(qǐng)求方式但是在vue中如何實(shí)現(xiàn)呢 這里記錄一下配置過(guò)程，對(duì)vue?使用axios發(fā)起?post?get配置過(guò)程感興趣的朋友一起看看吧2022-05-05
Vue中響應(yīng)式系統(tǒng)實(shí)現(xiàn)原理圖文講解
Vue的響應(yīng)式實(shí)現(xiàn)是借助Object.defineProperty通過(guò)重寫(xiě)getter和setter方法來(lái)進(jìn)行的數(shù)據(jù)劫持，Vue3通過(guò)Proxy代理攔截對(duì)象中任意屬性的變化，通過(guò)Reflect反射對(duì)源對(duì)象的屬性進(jìn)行操作，然后再在get里收集依賴(lài)在set里派發(fā)更新2023-03-03
vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本功能的方法，文中示例代碼非常詳細(xì)，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了Vue中組件的緩存，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在vue中配置不同的代理同時(shí)訪(fǎng)問(wèn)不同的后臺(tái)操作
這篇文章主要介紹了在vue中配置不同的代理同時(shí)訪(fǎng)問(wèn)不同的后臺(tái)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
TinyMCE 是一款功能強(qiáng)大的富文本編輯器,廣泛應(yīng)用于各種 Web 應(yīng)用中,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中集成 TinyMCE,通過(guò)詳盡的步驟說(shuō)明、示例代碼展示以及豐富的配置選項(xiàng),助力開(kāi)發(fā)者輕松實(shí)現(xiàn)內(nèi)容編輯的增強(qiáng)與美化,需要的朋友可以參考下2024-11-11
父子組件通訊是指在前端開(kāi)發(fā)的組件化架構(gòu)中,父組件與子組件之間互相傳遞數(shù)據(jù)和觸發(fā)功能的一種機(jī)制,這種機(jī)制使得組件能夠保持獨(dú)立性的同時(shí),也能協(xié)同工作,本文給大家介紹了Vue父子組件通訊的四種方法,需要的朋友可以參考下2024-07-07
Vue導(dǎo)入Echarts實(shí)現(xiàn)折線(xiàn)散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實(shí)現(xiàn)折線(xiàn)散點(diǎn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue的data、computed、watch源碼淺談，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04