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-ссылке.

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