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