javascript - Nuxt.js: Cómo sobrescribir scrollBehaviour para un cambio de ruta único

Tengo una página de Nuxt donde hago scroll al inicio en cada cambio de ruta. Definimos esto en el nuxt.config.js

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

Ahora tengo un único enlace de navegación que es un poco especial: «Contacto» no lleva a una nueva página con solo la información de contacto, sino que debería ir al pie de página donde los detalles de contacto están escritos en cada página. Así que añadí un enlace (no un nuxtlink) para enlazar con el ancla #contact en el pie de página.

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

Esto no funciona, sin embargo, porque registra un cambio de ruta y vuelve a colocar la página en la parte superior. (Al menos esa es mi suposición). Intenté ejecutar alguna función para establecer la propiedad scrollTop, pero luego veo un parpadeo, donde se desplaza un poco pero luego se restablece a la parte superior:

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

Y declaré un método (cerrar la navegación funciona):

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

Así que pensé que encontraría algo de información aquí: https://nuxtjs.org/api/configuration-router#scrollBehavior

Pero hasta donde pude entender, solo hay una declaración para establecer el scrollBehaviour para todas las rutas. ¿Puedo de alguna manera decir que cada vez que la ruta incluya #contact no quiero que la aplicación interfiera con mi posición de desplazamiento?

Gracias por cualquier ayuda con esto.

Salud

Respuesta #1

Crea tu ancla #contact como lo hiciste, pero cambia el comportamiento de desplazamiento para manejarlo:

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