javascript - Nuxt.js : Comment remplacer scrollBehaviour pour un seul changement de route

J'ai une page Nuxt où je fais défiler jusqu'en haut à chaque changement de route. Nous avons défini cela dans le nuxt.config.js

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

Maintenant, j'ai un seul lien de navigation qui est un peu spécial : « Contact » ne mène pas à une nouvelle page avec seulement les informations de contact, mais devrait plutôt aller vers le pied de page où les coordonnées sont écrites sur chaque page. J'ai donc ajouté un lien (pas un nuxtlink) pour diriger vers l'ancre #contact dans le pied de page.

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

Cela ne fonctionne pas cependant parce qu'il enregistre un changement de route et remet la page en haut à nouveau. (Du moins, c'est mon hypothèse). J'ai essayé d'exécuter une fonction pour définir la propriété scrollTop, mais ensuite je vois un clignotement, où ça fait défiler un peu mais est ensuite remis en haut :

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

Et j'ai déclaré une méthode (la fermeture de la navigation fonctionne) :

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

Donc je pensais trouver des informations ici : https://nuxtjs.org/api/configuration-router#scrollBehavior

Mais autant que je puisse comprendre, il n'y a qu'une seule déclaration pour définir le comportement de défilement pour toutes les routes. Puis-je d'une manière ou d'une autre dire que chaque fois que la route inclut #contact, je ne veux pas que l'application interfère avec ma position de défilement ?

Merci pour toute aide à ce sujet.

Santé

Réponse #1

Créez votre ancre #contact comme vous l'avez fait, mais changez le comportement de défilement pour le gérer :

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