javascript - Nuxt.js: Wie man scrollBehaviour für einen einzelnen Routenwechsel überschreibt

Ich habe eine Nuxt-Seite, auf der ich bei jeder Router-Änderung nach oben scrolle. Wir haben dies in der nuxt.config.js definiert.

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

Jetzt habe ich einen einzigen Navigationslink, der ein wenig besonders ist: «Kontakt» führt nicht zu einer neuen Seite mit nur den Kontaktinformationen, sondern soll stattdessen zum Footer gehen, wo auf jeder Seite die Kontaktdaten stehen. Also habe ich einen Link (keinen Nuxt-Link) hinzugefügt, um auf den #contact-Anker im Footer zu verlinken.

  <a class="Submenu__link Submenu__link--contact" href="#contact">
    Contact
  </a>

Das funktioniert jedoch nicht, weil es eine Routenänderung registriert und die Seite erneut nach oben setzt. (Zumindest ist das meine Annahme). Ich habe versucht, eine Funktion auszuführen, um die scrollTop-Eigenschaft zu setzen, aber dann sehe ich ein Flackern, bei dem ein wenig gescrollt wird, aber dann wieder nach oben gesetzt wird:

  <li class="Submenu__item">
    <a @click="closeNavAndScroll" class="Submenu__link Submenu__link--contact" href="#contact">
      Contact
    </a>
  </li>

Und ich habe eine Methode deklariert (schließende Navigation funktioniert):

closeNavAndScroll () {
  this.closeNavMenu()
  window.scrollTop(400)
}

Also dachte ich, ich finde hier einige Informationen: https://nuxtjs.org/api/configuration-router#scrollBehavior

Aber soweit ich es verstehen konnte, gibt es nur eine Deklaration, um das Scrollverhalten für alle Routen festzulegen. Kann ich irgendwie sagen, dass ich, wann immer die Route #contact enthält, nicht möchte, dass die App meine Scrollposition verändert?

Danke für jede Hilfe dabei.

Prost

Antwort #1

Erstellen Sie Ihren #contact-Anker wie gehabt, ändern Sie jedoch das Scroll-Verhalten, um ihn zu behandeln:

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