해시/앵커가 있는 페이지에 대한 nuxt 링크 탐색 문제

해시/앵커가 있는 페이지에 대한 nuxt 링크 탐색 문제

웹 사이트 네비게이션에서 nuxt 링크를 사용하고 있으며, 대부분은 다음과 같이 홈페이지에서 해시드 요소/앵커를 가리킨다.

<nuxt-link
  v-else
  class="text-link"
  :to="localePath('index') + #hash"
>

그리고 현재 홈 페이지에 있지만 다른 사이트(예: /about)로 이동할 때 nuxt 링크를 클릭할 때(그래서 /about에서 /#hash 또는 /any-other-site#hash로 이동하려고 함) "Nuxt 오류가 표시되어 "Null의 'offSetTop'을 읽을 수 없음"이라고 표시된 콘솔을 확인하십시오.

nuxt.config의 내 라우터 구성(이 구성이 없으면 요소와 동일한 사이트에 있는 고정된 요소로 스크롤할 수도 없음!):

  router: {
    scrollBehavior(to) {
      if (to.hash) {
        return window.scrollTo({ top: document.querySelector(to.hash).offsetTop + window.innerHeight, behavior: 'smooth' });
      }
      return window.scrollTo({ top: 0, behavior: 'smooth' });
      }
  },

:속성하기 위해 나는 'hash' '#hash'를 시도했지만, 아무 것도 효과가 없다.누가 좀 도와주시겠습니까?다른 페이지 + #앵커로 이동하려면 어떻게 해야 하는가(따라서 해당 앵커로 스크롤하려면?)

여기서 이 문제를 가진 사람은 누구나 사용한다면 간단한 해결책이다.Nuxt-Link

사용하는 대신<nuxt-link to="#contact" >Contact</nuxt-link>안 먹히는데사용하다<nuxt-link :to="{ path: '/',hash:'#contact'}">Contact</nuxt-link>

path당신이 찾아갈 페이지는

hash당신이 찾아갈 위치 입니다.

이게 누군가에게 도움이 되길 바래.

조금 늦었지만 이것이 내가 성취할 수 있었던 것이다.Sivuyile-TG-Magutywa 덕분에

 <nuxt-link :to="{ path: localePath('index'),hash:'#about'}">
          {{ $t("menu.about") }}
 </nuxt-link>

생산량

https://www.shrek.com/fr/about

이렇게 하면 getBoundingClientRirect()를 사용하면 하위 섹션의 경우 getBoundingClientRirect()가 더 잘 작동한다.

if (to.hash) {
        let el = await findEl(to.hash)
        if ('scrollBehavior' in document.documentElement.style) {
          return window.scrollTo({ top: el.getBoundingClientRect().top+window.scrollY, behavior: 'smooth' })
        } else {
          return window.scrollTo(0, el.getBoundingClientRect().top+window.scrollY)
        }
      }

참조URL: https://stackoverflow.com/questions/55599364/problem-with-nuxt-links-navigation-to-pages-with-hashes-anchors