Vue.js在setTimeout之後滾動到新頁面路線的頂部

Question

我有一個頁面轉換，當滾動到新路線頂部的滾動是即時的時，它不能很好地工作。我想等100毫秒才能自動滾動到頂端。下面的代碼根本不會最終滾動。有沒有辦法做到這一點？

export default new Router({ 
    mode: 'history', 
    routes: [ 
     { 
      path: '/', 
      name: 'Home', 
      component: Home 
     } 
    ], 
    scrollBehavior (to, from, savedPosition) { 
     setTimeout(() => { 
      return { x: 0, y: 0 } 
     }, 100); 
    } 
}) 

Answer 1

這可能不是最好的辦法，但在加入

document.body.scrollTop = document.documentElement.scrollTop = 0;

路線的核心組件（在這種情況下，Home）mounted()功能達到我想要的東西。

Answer 2

這是怎麼回事？

router.beforeEach(function (to, from, next) { 
    window.scrollTo(0, 0) 
    next() 
}) 

Answer 3

如果您希望這每個路線上發生，你可以在路由器hook之前這樣做：

const router = new VueRouter({ ... }) 

router.beforeEach(function (to, from, next) { 
    setTimeout(() => { 
     window.scrollTo(0, 0); 
    }, 100); 
    next(); 
}); 

如果你是在一箇舊版本VUE路由器的，使用：

router.beforeEach(function (transition) { 
    setTimeout(() => { 
     window.scrollTo(0, 0); 
    }, 100); 
    transition.next(); 
});