Vue.js zum Anfang der neuen Seite routen nach setTimeout

Question

Ich habe einen Seitenübergang, der nicht gut funktioniert, wenn der Bildlauf zum Anfang einer neuen Route sofort erfolgt. Ich würde gerne 100ms warten, bevor es automatisch nach oben scrollt. Der folgende Code scrollt überhaupt nicht. Gibt es eine Möglichkeit, dies zu tun? Diese

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

ist wahrscheinlich nicht die beste Art und Weise, aber

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

in einer Kernkomponente der Strecke (in diesem Fall Home) Zugabe mounted() Funktion erreicht, was ich will.

Answer 2

Was ist damit?

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

Answer 3

Wenn Sie dies auf jeder Strecke passieren wollen, können Sie dies in der tun, bevor hook im Router:

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

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

Wenn Sie eine ältere Version von vue-Router sind, zu verwenden:

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