Explication détaillée du comportement de défilement de Vue-Router

Cette fois, je vous apporte une explication détaillée de l'utilisation du comportement de défilement de Vue-Router, et quelles sont les précautions lors de l'utilisation du comportement de défilement de Vue-Router. Voici un cas pratique. Jetons un coup d’œil.

Comportement de défilement

En utilisant le routage frontal, lorsque vous passez à un nouvel itinéraire, vous souhaitez que la page défile vers le haut ou qu'elle conserve la position de défilement d'origine, tout comme si vous rechargez la page. vue-router peut le faire, mais en mieux. Il vous permet de personnaliser définir la manière dont la page défile lors du routage des commutateurs.

Remarque : Cette fonctionnalité est uniquement disponible en mode historique HTML5.

Lors de la création d'une instance de routeur, vous pouvez fournir une méthode scrollBehavior :

var router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

La méthode scrollBehavior reçoit des objets de routage vers et depuis. Le troisième paramètre savingPosition est disponible si et seulement si popstate Navigation (déclenché par les boutons avant/arrière du navigateur).

Cette méthode renvoie les informations sur l'objet de la position de défilement, qui ressemblent à ceci :

• { x : nombre, y : nombre }

• { sélecteur : chaîne }

Si une fausse valeur booléenne est renvoyée ou si un objet vide est renvoyé, aucun défilement ne se produira.

Exemple :

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

Pour toute navigation sur itinéraire, laissez simplement la page défiler vers le haut.

Revenez à savingPosition, lorsque vous appuyez sur le bouton Précédent/Avant, il se comportera comme le comportement natif du navigateur :

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

Si vous souhaitez simuler le comportement de « faire défiler vers l'ancre » :

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de Three.js

Comment utiliser la bibliothèque Particles.js dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!