Nuxt.js：如何为单次路由跳转重写scrollBehavior方法

你已经搞定了全局路由切换返回顶部的逻辑，但遇到了锚点滚动的特殊需求——没问题，我们可以调整scrollBehavior方法，让它同时兼容两种场景：

第一步：修改nuxt.config.js中的scrollBehavior方法 #

把原来的逻辑升级一下，判断目标路由是否带有锚点（to.hash），如果有的话就滚动到对应的锚点元素，否则保持返回顶部的行为：

scrollBehavior(to, from, savedPosition) {
  // 如果有锚点，滚动到对应的元素
  if (to.hash) {
    return {
      el: to.hash,
      // 可选：加个偏移量，避免被固定导航栏挡住
      top: 60
    }
  }
  // 没有锚点的话，回到顶部
  return { x: 0, y: 0 }
}

第二步：优化「联系我们」的链接 #

如果是当前页面内的锚点跳转，直接用普通<a>标签就可以：

<a href="#contact" class="your-class">联系我们</a>

如果需要跨页面跳转到目标页面的锚点（比如从首页点击后到产品页的footer锚点），更推荐用Nuxt的<NuxtLink>，这样路由切换时scrollBehavior能正确处理锚点：

<NuxtLink to="/product#contact" class="your-class">联系我们</NuxtLink>

额外提示：处理锚点元素可能未加载完成的情况 #

如果你的footer是异步加载的（比如用了组件懒加载），可能会出现找不到锚点元素的情况，这时候可以在scrollBehavior里加个延迟：

scrollBehavior(to, from, savedPosition) {
  if (to.hash) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          el: to.hash,
          top: 60
        })
      }, 500)
    })
  }
  return { x: 0, y: 0 }
}

这样调整后，既保留了全局路由切换返回顶部的功能，又能让「联系我们」的锚点链接正常工作啦～

内容的提问来源于stack exchange，提问作者Merc