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

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),棗莊企業(yè)網(wǎng)站建設(shè),棗莊品牌網(wǎng)站建設(shè),網(wǎng)站定制,棗莊網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,棗莊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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上的事件，切換到下一個頁面同樣會被觸發(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()
})

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：如何解決vue單頁緩存存在的問題-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/dchdpp.html