J'ai une transition de page qui ne fonctionne pas bien lorsque le défilement vers le haut d'un nouvel itinéraire est instantané. Je voudrais attendre 100ms avant qu'il ne défile automatiquement vers le haut. Le code suivant ne finit pas par défiler du tout. Y a-t-il un moyen de faire cela?
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
scrollBehavior (to, from, savedPosition) {
setTimeout(() => {
return { x: 0, y: 0 }
}, 100);
}
})
Ceci est supporté nativement par Vue maintenant, utilisez simplement scrollBehaviour
, comme ceci:
export default new Router({
scrollBehavior() {
return { x: 0, y: 0 };
},
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
mode: 'history'
});
Plus ici .
Si vous voulez que cela se produise sur tous les itinéraires, vous pouvez le faire dans l’avant hook du routeur:
const router = new VueRouter({ ... })
router.beforeEach(function (to, from, next) {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
next();
});
Si vous utilisez une ancienne version de vue-router, utilisez:
router.beforeEach(function (transition) {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
transition.next();
});
Les autres réponses ne parviennent pas à gérer les cas Edge tels que:
http://example.com/foo#bar
devrait accéder à l'élément de la page avec une id
de bar
.Voici l'exemple de code qui gère tout ce qui précède:
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
} else if (to.hash) {
return {
selector: to.hash
};
} else {
return { x: 0, y: 0 };
}
}
});
Ce n'est probablement pas la meilleure façon, mais en ajoutant
document.body.scrollTop = document.documentElement.scrollTop = 0;
dans la fonction de mounted()
du composant principal d'une route (dans ce cas, Home
) réalise ce que je veux.
Et ça ?
router.beforeEach(function (to, from, next) {
window.scrollTo(0, 0)
next()
})