這篇文章主要介紹了如何解決vue單頁緩存存在的問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于安陸企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。安陸網(wǎng)站建設(shè)公司,為安陸等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1.css同名覆蓋,解決方法：父組件加上scoped

 @import './unbind.scss'

子組件同名樣式加上deep

 /deep/ .tabs-row {
  .items-wrp{
   padding-left: .34rem;
  }
  .item {
   margin:0 .12rem .16rem 0;
  }
 }

2.事件全局綁定

綁在window或document或body上的事件，切換到下一個(gè)頁面同樣會(huì)被觸發(fā)，需要銷毀，也防止內(nèi)存泄漏,全局綁定的事件如果是公用組件慎用off().on(),因?yàn)榭赡芤玫钠渌慕M件全局綁定的事件被移除

destroyed：返回的時(shí)候會(huì)觸發(fā)，防止返回到上一頁時(shí)window上scroll被觸發(fā)，官網(wǎng)上是推薦在beforeDestroy做事件移除或者新增DOM或移動(dòng)DOM操作

deactivated：前進(jìn)到新頁面時(shí)會(huì)觸發(fā)，防止進(jìn)入下一頁時(shí)window上scroll被觸發(fā)

activated：被緩存的頁面激活，即返回時(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)到新的頁面，此時(shí)音頻仍在播放，解決方法：前進(jìn)到新頁面會(huì)觸發(fā)deactivated鉤子，此時(shí)暫停音頻播放

deactivated () {
  // 前進(jìn)時(shí)暫停音頻播放
  this.pauseAudio()
 },
methods: {
  pauseAudio () {
   this.$refs.audioPlayer && this.$refs.audioPlayer.togglePlay()
  }
}

當(dāng)音頻在還在播放時(shí)，返回上一頁，此時(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)返回上一頁時(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í)并不會(huì)觸發(fā)router的守衛(wèi)

代碼中通過hash改變，監(jiān)聽hashchange來處理之后的邏輯，但是就不會(huì)觸發(fā)router的導(dǎo)航守衛(wèi)，也就是沒有跳轉(zhuǎn)，就不存在單頁緩存

window.location.hash = '#refer'

解決辦法：用replace替換url,相應(yīng)的原來hashchange就不會(huì)監(jiān)聽到，需要把這塊邏輯拿到created里邊執(zhí)行

this.$router.replace({path: `${location.pathname}${location.search}#refer`})

7.分享問題修復(fù)

單頁緩存導(dǎo)致返回時(shí)分享的鏈接和自定義文案沒有更新，針對(duì)特別處理的分享數(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
  }
}

針對(duì)普通分享頁面,在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()
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決vue單頁緩存存在的問題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!