javascript - Nuxt.js: Como substituir o scrollBehaviour para uma única mudança de rota


Tenho uma página Nuxt onde faço scroll até ao topo em cada mudança de router. Definimos isto no nuxt.config.js

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

Agora tenho um único link de Navegação que é um pouco especial: «Contactos» não leva a uma nova página com apenas a informação de contacto, mas sim deve ir para o rodapé onde os detalhes de contacto estão escritos em todas as páginas. Então adicionei um link (não um nuxtlink) para ligar à âncora #contact no rodapé.

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

Isto não funciona, no entanto, porque regista uma mudança de rota e volta a definir a página para o topo. (Pelo menos essa é a minha suposição). Tentei executar alguma função para definir a propriedade scrollTop, mas então vejo um tremor, onde roda um pouco mas depois é novamente definido para o topo:

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

E declarei um método (fechar a navegação funciona):

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

Então pensei em encontrar algumas informações aqui: https://nuxtjs.org/api/configuration-router#scrollBehavior

Mas pelo que consegui perceber, só existe uma declaração para definir o scrollBehaviour para todas as rotas. Há alguma forma de eu dizer que sempre que a rota incluir #contact eu não quero que a aplicação mexa na minha posição de scroll?

Obrigado por qualquer ajuda com isto.

Saúde

Resposta #1

Crie o seu #contact anchor como fez, mas altere o comportamento de scroll para lidar com ele:

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