Detaillierte Erklärung des Scrollverhaltens von Vue-Router

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung des Scrollverhaltens von Vue-Router und die Vorsichtsmaßnahmen bei der Verwendung des Scrollverhaltens von Vue-Router Das Folgende ist ein praktischer Fall.

Scroll-Verhalten

Wenn Sie das Front-End-Routing verwenden und zu einer neuen Route wechseln, möchten Sie, dass die Seite nach oben scrollt oder die ursprüngliche Scrollposition beibehält, genau wie beim Neuladen der Seite. vue-router kann es, aber besser: Es ermöglicht Ihnen, benutzerdefiniert zu definieren, wie die Seite scrollt, wenn das Routing umgeschaltet wird.

Hinweis: Diese Funktion ist nur im HTML5-Verlaufsmodus verfügbar.

Beim Erstellen einer Router-Instanz können Sie eine scrollBehavior-Methode bereitstellen:

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

Die scrollBehavior-Methode empfängt von und zu Routing-Objekten. Der dritte Parameter „savedPosition“ ist genau dann verfügbar, wenn popstate Navigation (ausgelöst durch die Vorwärts-/Zurück-Schaltflächen des Browsers) ist.

Diese Methode gibt die Objektinformationen der Bildlaufposition zurück, die wie folgt aussehen:

• { x: Zahl, y: Zahl }

• { Selektor: Zeichenfolge }

Wenn ein falscher boolescher Wert oder ein leeres Objekt zurückgegeben wird, findet kein Bildlauf statt.

Beispiel:

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

Für die gesamte Routennavigation lassen Sie die Seite einfach nach oben scrollen.

Kehren Sie zur gespeicherten Position zurück. Wenn Sie die Zurück-/Vorwärts-Taste drücken, verhält es sich wie das native Verhalten des Browsers:

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

Wenn Sie das Verhalten von „Zum Anker scrollen“ simulieren möchten:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Three.js

So verwenden Sie die Particles.js-Bibliothek in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Scrollverhaltens von Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!