nuxt-link: 해시를 사용하여 동일한 앵커로 리디렉션

nuxt-link: 해시를 사용하여 동일한 앵커로 리디렉션

A를 사용하고 있다.<nuxt-link>내 Nuxt 응용 프로그램의 구성 요소와 나는 다음과 같은 문제가 있다.

• 링크를 처음 클릭했을 때, 필요한 경우 페이지가 변경되고 앵커는 완벽하게 작동한다.
• 그러나 페이지에서 조금 스크롤한 후 다시 링크를 클릭하면 URL이 이미 브라우저 탐색기에 있기 때문에 아무 일도 일어나지 않는다.

을 클릭할 때 이 동작을 덮어쓰려면 어떻게 해야 하는가?nuxt-link, 이전에 클릭했던 내용에 관계없이 원하는 섹션으로 스크롤됨 ? (페이지 새로 고침 없이)

여기 내 것이 있다.nuxt-link처럼 보인다

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

나는 당신이 클릭 핸들러를 당신의 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...
    },
}

그게 출발점을 주길 바래?!건배.

이 기능을 사용할 수 있도록 하기 위해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
        })
      }
    }
  }

참조URL: https://stackoverflow.com/questions/63732673/nuxt-link-redirect-to-the-same-anchor-with-hash