按照正常的產品邏輯，我們在進行頁面切換時滾動條應該是在頁面頂部的，可是。。。在使用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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。