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

Question

我有一个 nuxt-page，每次更改路由器时我都会滚动到顶部。我们在 nuxt.config.js

中定义了它

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

现在我有一个单独的导航 link，它有点特别：«联系» 不会指向一个只有联系信息的新页面，而是应该转到包含联系信息的页脚写在每一页上。所以我在页脚的 #contact 锚点的 link 添加了一个 link （不是 nuxtlink）。

  <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}
  }
}

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

Nuxt.js: How to override scrollBehaviour for a single route change

javascript

scroll

vue.js

vue-router

nuxt.js