javascript - Nuxt.js: Tek bir rota değişikliği için scrollBehaviour nasıl geçersiz kılınır

Her yönlendirici değişiminde en üste kaydırdığım bir nuxt sayfam var. Bunu nuxt.config.js dosyasında tanımladık

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

Şimdi bir tane özel bir Navigasyon bağlantım var: «İletişim» yalnızca iletişim bilgilerini içeren yeni bir sayfaya gitmiyor, bunun yerine her sayfada iletişim bilgilerinin yazılı olduğu footer'a gitmesi gerekiyor. Bu yüzden footer'daki #contact anchorına bağlanmak için bir bağlantı ekledim (nuxtlink değil).

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

Ama bu işe yaramıyor çünkü bir rota değişikliğini kaydediyor ve sayfayı tekrar en üste ayarlıyor. (En azından benim varsayımım bu). scrollTop özelliğini ayarlamak için bazı fonksiyonları çalıştırmayı denedim ama sonra biraz kayma oluyor ve ardından tekrar en üste sıfırlanıyor:

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

Ve bir yöntem ilan ettim (nav kapatma çalışıyor):

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

Bu yüzden burada bazı bilgiler bulabileceğimi düşündüm: https://nuxtjs.org/api/configuration-router#scrollBehavior

Ama anlayabildiğim kadarıyla sadece tüm rotalar için scrollBehaviour ayarlamaya yönelik bir bildirim var. Rotada #contact geçtiğinde uygulamanın kaydırma konumumla uğraşmasını istemediğimi bir şekilde söyleyebilir miyim?

Buna dair herhangi bir yardım için teşekkürler.

Şerefe

Cevap #1

#contact bağlantınızı daha önce yaptığınız gibi oluşturun, ancak kaydırma davranışını bunu ele alacak şekilde değiştirin:

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