javascript - nuxt-link：使用哈希重定向到同一个锚点

Question

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

• 当我第一次单击链接时，一切正常，如果需要更改页面并且锚点工作正常
• 但是，如果我在页面上滚动一点，然后再次单击链接，则什么也不会发生，因为我假设的浏览器导航栏中已经存在该 url。

我怎样才能覆盖这种行为，以便当我点击 时nuxt-link，无论我之前点击了什么，它都会滚动到所需的部分？（不刷新页面）

这是我的nuxt-link样子

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

Answer 1

我相信您应该能够向您的 nuxt-link 添加点击处理程序。

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

希望这能给你一个起点？！干杯

Answer 2

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

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