Vue Nuxt 滚动到不同的页面

Question

我正在尝试实现一个菜单，其中菜单项滚动到部分 id。

如果我在当前所在页面上的页面部分滚动，它工作正常。

为了实现它，我安装了vue-scrollto。

问题是相同的菜单也在其他页面上，这意味着在这种情况下，它应该加载该部分所在的页面并滚动到它。

为了给你一个想法，这是一个以前用 jQuery 完成的网站，我正在 Nuxt 中重做。在 jQuery 中，我正在解决它：

$('html,body').animate({  
  scrollTop: $(window.location.hash).offset().top -60
  }, 1000);

到目前为止，我得到的最接近的是：

<li class="nav-item"><nuxt-link to="/" v-scroll-to="{ element: '#intro', duration: 1000, offset: -100  }" >Welcome</nuxt-link></li>

但是，例如，如果我在 about 页面，首先它会加载主页，如果我再次单击它会滚动到该部分。如何在不点击两次菜单链接的情况下进行工作？

Answer 1

我在 Nuxt 中有一个类似的用例。我使用以下实现了（虽然我没有使用你提到的插件）：

~/app/router.scrollBehavior.js

export default async function (to, from, savedPosition) { 
  if (savedPosition) {
    return savedPosition
  }

  const findEl = (hash, x) => {
    return document.querySelector(hash) ||
      new Promise((resolve, reject) => {
        if (x > 50) {
          return resolve()
        }
        setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
      })
  }

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

  return { x: 0, y: 0 }
}

您可以在此处找到更多information about configuring Nuxt router and its scroll behaviour。