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(); 
});