使用vue-router進行頁面切換時滾動條位置與滾動監聽事件

按照正常的產品邏輯，我們在進行頁面切換時滾動條應該是在頁面頂部的，可是。。。在使用vue-router進行頁面切換時，發現滾動條所處的位置被自動記錄了下來，且在另一個組件內定義的滾動監聽事件仍會運行，着實吃了一大驚。。。

說說我的破解方法：1、在每個需要用vue-router切換的組件的mounted鈎子內將頁面的位置自動回滾到頁面頂部，解決滾動條位置自動記錄問題；

　　　　　　　　　2、在每個組件內定義一條變量scrollWatch默認為true，在綁定滾動監聽事件時加個if判斷，只有在scrollWatch為true時進行監聽函數，然后在組件destroyed的鈎子內將變量scrollWatch設為false；這樣就解決了滾動監聽在別的組件內仍會運行的問題。

 

<script>
import $ from 'jquery';
export default {
  data () {
    return {
      scrollWatch: true
    }
  },
  mounted() {
    $(window).scrollTop(0);
    $(window).on('scroll', () => {
      if (this.scrollWatch) {
           //your code here
        }
      }
    });
  },
  destroyed () {
    this.scrollWatch = false;
  }
}
</script>