vue単一ページキャッシュに存在する問題と解決策

3974 ワード
vue
1.css同名上書き、解決方法:親コンポーネントにscopedを追加

サブアセンブリ同名スタイルにdeepを付ける
/deep/ .tabs-row {
 .items-wrp{
  padding-left: .34rem;
 }
 .item {
  margin:0 .12rem .16rem 0;
 }
}

2.イベントグローバルバインド
Windowsや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'

解決方法:urlをreplaceで置き換えると、元の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()
})
自動完了js
反射による配列の操作