scroll-behavior.md

Scroll-Verhalten

Oft wollen wir, dass die Seite nach oben scrollt, wenn zu einer neuen Route navigiert wird, oder dass die Scroll-Position von Verlaufseinträgen wie beim Neuladen einer Seite beibehalten wird. vue-router ermöglichst das und noch mehr - wir können das Scroll-Verhalten komplett individualisieren.

Merke: Dies funktioniert nur im HTML5-Verlaufsmodus ("history mode").

Beim Erzeugen der Router-Instanz fügt man die scrollBehavior-Funktion hinzu:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // zurückgeben der gewünschten Position
  }
})

Die scrollBehavior-Funktion erhält die Route-Objeke to und from als Argumente. Das dritte Argument savedPosition steht nur zur Verfügung, wenn es sich um eine popstate-Navigation handelt (d.h. der Vor-/Zurück-Button des Browsers hat die Navigation ausgelöst).

Die Funktion sollte ein Objekt zurückgeben, dass die Scroll-Position beschreibt. Das Objekt kann folgendermaßen aussehen:

• { x: number, y: number }
• { selector: string }

Wenn ein falscher (falsy) Wert oder ein leeres Objekt zurückgegeben wird, wird nicht gescrollt.

Im folgenden Beispiel scrollt die Seite komplett nach oben:

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

Wenn die Funktion das savedPosition-Object zurückgibt, verhält sich die Seite wie ein Browser, innerhalb dessen mit den Vor-/Zurück Buttons navigiert wird.

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

Simulation des "Scrolle zum Anchor"-Verhaltens:

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

Du kannst außerdem die Route Meta-Felder für eine noch genauere Kontrolle des Scroll-Verhaltens nutzen. Hier findest du ein Beispiel.