nuxt-link:使用散列重定向到同一个锚点

Question

我在我的Nuxt应用程序中使用了一个<nuxt-link>组件，我遇到了以下问题：

当我第一次在链接上单击

• 时，一切正常，如果需要的话，页面被更改，锚点在页面上工作，如果我在页面上滚动一点，然后再次单击链接，什么都不会发生，因为url已经出现在我假设的浏览器导航栏中。

我如何覆盖此行为，以便当我单击nuxt-link时，它会滚动到所需的部分，而不管我以前单击了什么？(不刷新页面)

以下是我的nuxt-link的样子

<nuxt-link :to="{ path: localePath('/'), hash: '#homepage' }"
>
  <span>Homepage</span>
</nuxt-link>

Answer 1

让它与@Merc建议的绑定到click.native事件的函数一起工作。

handleScroll(anchorId: string): void {
    if (this.$route.hash) {
      const anchor = document.querySelector(`#${anchorId}`)

      // Check if the anchor has been found
      if (anchor) {
        window.scrollTo({
          // Scroll so that the anchor is at the top of the view
          top: anchor.getBoundingClientRect().top + window.pageYOffset
        })
      }
    }
  }

Answer 2

我相信您应该能够在nuxt-链接中添加一个单击处理程序。

<nuxt-link
  :to="{ path: localePath('/'), hash: '#homepage' }"
  @click.native="scroll"
>
  Homepage
</nuxt-link>

(不确定@click.native，如果不起作用，只需尝试@click)

然后在你的方法中：

methods: {
    scroll() {
      // your scroll function, probably reading document.documentElement.scrollTop or similar
    // if necessary check this.$route if the hash is already present, if so only do it in that case...
    },
}

希望这能给你点开场白？！干杯