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

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

如果您使用的是此处有此问题的任何人，这都是一个简单的解决方案 Nuxt-Link

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

path 是您将导航到的页面

hash 是您要滚动到的位置

希望这对某人有所帮助。