javascript - Nuxt.js: Hogyan írjuk felül a scrollBehaviour-t egyetlen útvonalváltozás esetén

Van egy Nuxt-oldalam, ahol minden útválasztó váltásnál a tetejére görgetek. Ezt a nuxt.config.js fájlban definiáltuk.

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

Most van egyetlen navigációs hivatkozásom, ami egy kicsit különleges: a «Kapcsolat» nem egy új oldalra vezet, ahol csak a kapcsolati információk vannak, hanem arra kell, hogy menjen a lábléchez, ahol a kapcsolati adatok minden oldalon fel vannak tüntetve. Ezért hozzáadtam egy hivatkozást (nem nuxtlinket), hogy a #contact horgonyhoz kapcsolódjon a láblécben.

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

Ez azonban nem működik, mert regisztrál egy útvonalváltozást, és újra a lap tetejére állítja az oldalt. (Legalábbis ez a feltételezésem.) Megpróbáltam végrehajtani néhány függvényt a scrollTop tulajdonság beállítására, de akkor látok egy villanást, ahol egy kicsit görget, de aztán ismét a tetejére állítódik:

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

És deklaráltam egy metódust (a navigáció bezárása működik):

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

Szóval úgy gondoltam, találok itt néhány információt: https://nuxtjs.org/api/configuration-router#scrollBehavior

De amennyire megértettem, csak van egy deklaráció az összes útvonalra vonatkozó scrollBehaviour beállításához. Tudok valahogy úgy mondani, hogy amikor az útvonal tartalmazza a #contact részt, ne akarja az alkalmazás módosítani a görgetési pozíciómat?

Köszönöm bármilyen segítséget ebben.

Egészségedre

Válasz #1

Hozd létre a #contact horgonylinket, ahogy tetted, de változtasd meg a görgetési viselkedést, hogy kezelje azt:

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