Heim  >  Artikel  >  Web-Frontend  >  Lösung für den Fehler, dass sich die Scrollposition der Seite nach dem vue2.0-Routing-Schalter nicht ändert

Lösung für den Fehler, dass sich die Scrollposition der Seite nach dem vue2.0-Routing-Schalter nicht ändert

亚连
亚连Original
2018-05-30 13:56:482156Durchsuche

Im Folgenden werde ich Ihnen eine Lösung für den Fehler vorstellen, dass sich die Seitenscrollposition nach dem Routing-Schalter von vue2.0 nicht ändert. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Ich bin in einem kürzlich durchgeführten Projekt auf ein solches Problem gestoßen. Wenn Vue das Routing ändert, bleibt der Scrollabstand von der Seite nach oben unverändert.

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

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

Die Lösung ist sehr einfach, wie folgt, direkt überwachen Routing-Änderungen und weisen Sie dann den Scroll-Abstand scrollTop des Körpers auf 0 zu.

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

Ergänzung: Die oben genannten Probleme treten nur im Hash-Modus, Verlauf auf mode Auf der offiziellen Vue-Website gibt es eine bessere Möglichkeit, damit umzugehen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Angular4 integriert die Upload-Komponente von ng2-file-upload

Detaillierte Erklärung des NodeJS-ACL-Benutzers Rechteverwaltung

Beispiel für die NodeJS-Methode zum Parsen von XML-Strings in Objekte

Das obige ist der detaillierte Inhalt vonLösung für den Fehler, dass sich die Scrollposition der Seite nach dem vue2.0-Routing-Schalter nicht ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn