vue路由切換時內容組件的滾動條回到頂部

在使用vue的時候會出現切換路由的時候滾動條保持在原來的位置，要切換路由的時候滾動條回到頂部才有更好的用戶體驗

1、當頁面整體都要滾動到頂部的情況

router.afterEach(() => {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}）

2、當頁面中的其中一個組件中需要滾動到頂部的時候

 watch: {
    $route(to) {
      //監聽路由變化的時候使滾動條回到頂部
      this.$refs.content2.scrollTo(0,0)
    }
}

其中this.$refs獲取頁面中添加ref屬性的元素，上面的content2就是滾動的元素添加的ref屬性為content2

通過監聽路由的變化來實現路由切換時的滾動條回到頂部