Maison > interface Web > js tutoriel > le corps du texte

Solution au BUG selon lequel la position de défilement de la page ne change pas après le changement de routage vue2.0

亚连
Libérer: 2018-05-30 13:56:48
original
2163 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous une solution au bug selon lequel la position de défilement de la page ne change pas après le changement de routage vue2.0. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

J'ai rencontré un tel problème dans un projet récent. Lorsque Vue change de routage, la distance de défilement de la page vers le haut reste inchangée.

<a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a>
<router-link class="db" to="/user">个人中心</router-link>
Copier après la connexion

useRightNow(){
 if(判断用户存在){
  this.$router.push(&#39;/user&#39;)
 }else{
  this.$router.push("/login")
 }
}
Copier après la connexion

La solution est très simple, comme suit , surveillez directement les changements d'itinéraire de la montre, puis attribuez la distance de défilement scrollTop du corps à 0.

export default {
  watch:{
   &#39;$route&#39;:function(to,from){
           document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0; 
   }
  }
 }
Copier après la connexion

Supplément : Le problème ci-dessus ne se produira qu'en mode hachage . Le site officiel de vue dispose d'une meilleure méthode de traitement en mode historique.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Angular4 intègre le composant de téléchargement de ng2-file-upload

Explication détaillée de l'utilisateur acl nodejs gestion des droits

Exemple de méthode nodejs d'analyse d'une chaîne XML en objet

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal