web-dev-qa-db-fra.com

Vue.js défiler en haut de la nouvelle page après setTimeout

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);
    }
})
vue.jsvue-router
10
frosty

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 .

25
Edgar Quintero

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

Les autres réponses ne parviennent pas à gérer les cas Edge tels que:

  1. Saved Position - La position enregistrée survient lorsque l'utilisateur clique sur les positions arrière ou suivante. Nous souhaitons conserver l'emplacement que regardait l'utilisateur.
  2. Liens de hachage - E.g. http://example.com/foo#bar devrait accéder à l'élément de la page avec une id de bar.
  3. Enfin, dans tous les autres cas, nous pouvons naviguer en haut de la page.

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 };
    }
  }
});
8
Muhammad Rehan Saeed

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.

0
frosty

Et ça ?

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