Question

我在网站导航中使用nuxt链接，其中大多数指向首页中的散列元素/锚点，例如：

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

，如果当前在主页上，但是当我导航到其他站点时，它将完成其工作。 / about，然后单击导航栏nuxt链接（因此，我想从/ about导航到/＃hash或/ any-other-site＃hash），显示nuxt错误，以检查其显示为“无法读取”的控制台属性'offsetTop'为null”。

我在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' });
      }
  },

在：to属性中，我尝试了'hash''#hash'，但没有任何效果。可以请任何人帮助我吗？如何导航到其他页面+ #anchor（以便滚动到该锚点？）

Answer 1

有点晚了，但这是我能够实现的。感谢 Sivuyile-TG-Magutywa

flagger_canary_status == 2

输出

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

Answer 2

如果您使用的是Nuxt-Link

，那么遇到此问题的任何人都是一个简单的解决方案

代替使用 <nuxt-link to="#contact" >Contact</nuxt-link>不起作用。使用<nuxt-link :to="{ path: '/',hash:'#contact'}">Contact</nuxt-link>

path是您将导航到的页面

hash是您要滚动到的位置

希望这对某人有所帮助。

Answer 3

通过以下方式使用 getBoundingClientRect（）。top + window.scrollY 对我来说效果更好：

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

使用nuxt链接导航到具有哈希/锚点的页面时出现问题

3 个答案: