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) },

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   },}

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的守衛