Nuxt.js：如何为单个路由更改覆盖 scrollBehaviour

Question

我有一个 nuxt 页面，每次更改路由器时我都会滚动到顶部。我们在 nuxt.config.js 中定义了这个

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

现在我有一个单独的导航链接，它有点特别：«Contact» 不会引导到一个只有联系信息的新页面，而是应该转到页脚，在每个页面上都写有联系方式。所以我添加了一个链接（不是 nuxtlink）来链接到#contact页脚中的锚点。

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

但是这不起作用，因为它注册了路由更改并将页​​面再次设置为顶部。（至少这是我的假设）。我试图执行一些函数来设置 scrollTop 属性，但随后我看到了一个闪烁，它滚动了一点，但随后被重置到顶部：

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

我声明了一个方法（关闭导航工作）：

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

所以我想我在这里找到了一些信息：https : //nuxtjs.org/api/configuration-router#scrollBehavior

但据我所知，只有一个声明用于为所有路由设置 scrollBehaviour。我可以以某种方式说每当路线包括#contact我不希望应用程序弄乱我的滚动位置吗？

感谢您对此的任何帮助。

干杯

Answer 1

#contact像你一样创建你的锚点，但改变滚动行为来处理它：

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