vue單頁緩存存在的問題及解決方案

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上的事件，切換到下一個頁面同樣會被觸發，需要銷燬，也防止內存泄漏,全局綁定的事件如果是公用組件慎用off().on(),因爲可能引用的其他的組件全局綁定的事件被移除
destroyed：返回的時候會觸發，防止返回到上一頁時window上scroll被觸發，官網上是推薦在beforeDestroy做事件移除或者新增DOM或移動DOM操作
deactivated：前進到新頁面時會觸發，防止進入下一頁時window上scroll被觸發
activated：被緩存的頁面激活，即返回時被觸發，created此時不會被觸發，重新綁定事件

activated () {
 // 不直接綁定scroll，此處有限制
 this.bindEvent()
},
destroyed () {
 $(window).off('scroll', this.handleScrollFn)
},
deactivated () {
 $(window).off('scroll', this.handleScrollFn)
},
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力

3.音頻續播

當音頻在還在播放時，跳轉到新的頁面，此時音頻仍在播放，解決方法：前進到新頁面會觸發deactivated鉤子，此時暫停音頻播放

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

當音頻在還在播放時，返回上一頁，此時音頻仍在播放，解決方法：返回會觸發destroyed鉤子裏邊關閉音頻播放器

destroyed () {
  this.closeMini() //關閉音頻播放器
 },
methods: {
  closeMini () {
   this.mode = -1
   this.play = false
   if (this.player) {
    this.player.pause()
   }
   this.$emit('callback', 'close')
  },
}

4.微信分享數據未更新

當返回上一頁時，分享的數據沒有更新，需要在激活的鉤子裏再次讀取之前存的分享數據

activated () {
  // 單頁緩存分享數據重置
  this.setShare(this.shareCache)
  window.addEventListener('scroll', this.finishReading)
 },
 methods: {
  setShare (opt) {
   if (!opt) return
   baike.setShare && baike.setShare(opt)
  //存該頁的分享數據
   this.shareCache = opt 
  },
}
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力

5.router.afterEach裏上報pv時url未更新

在導航守衛afterEach裏邊上報，但是被觸發時url還未更新，導致上報的參數有誤，解決方法：通過to,from得到下一頁，上一頁的地址

var referrer = !from.name ? document.referrer :   
  `${location.origin}${from.fullPath}` // 通過from.name判斷刷新
 
 var curUrl = `${location.origin}${to.fullPath}` || ''

6.hash改變時並不會觸發router的守衛

代碼中通過hash改變，監聽hashchange來處理之後的邏輯，但是就不會觸發router的導航守衛，也就是沒有跳轉，就不存在單頁緩存

window.location.hash = '#refer'

解決辦法：用replace替換url,相應的原來hashchange就不會監聽到，需要把這塊邏輯拿到created裏邊執行

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

7.分享問題修復

單頁緩存導致返回時分享的鏈接和自定義文案沒有更新，針對特別處理的分享數據，在業務頁面修改，解決方法

activated () {
  this.setShare(this.shareCache)
 },
 
 methods: {
  setShare (opt) {
   if (!opt) return
// xx.setShare封裝的分享的底層方法
   xx.setShare && xx.setShare(opt)
   this.shareCache = opt
  }
}
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力

針對普通分享頁面,在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 { 
　　　　// 非分享自定義數據的頁面處理 
　　　　 xx.setShare({ link: `${location.origin}${to.fullPath}` })
 }
 })
})

8.關注，收藏等toast提示在返回時未消失，因爲延遲時間設置，解決方法：在路由鉤子裏邊強制隱藏

router.afterEach((to, from) => {
 // 切換路由，有toast提示立刻隱藏
 xx.toast.hide()
})