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