Nuxt项目中跨页面跳转hash锚点不生效该如何解决

问题原因 #

跨页面跳转时，Nuxt 的 scrollBehavior 触发时机早于目标页面的 DOM 挂载完成，此时页面上不存在对应 hash 的 ID 元素，因此滚动定位失效。同页面跳转时 DOM 已经渲染完毕，所以可以正常滚动到对应区块。

解决方案 #

方案1：修改 nuxt.config.js 中的 scrollBehavior 逻辑 #

通过轮询查找目标元素，等元素加载完成后再执行滚动，适配所有场景：

router: {
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return new Promise((resolve) => {
        // 先检查元素是否已经存在
        let target = document.querySelector(to.hash)
        if (target) {
          return resolve({
            selector: to.hash,
            behavior: "smooth"
          })
        }
        // 元素不存在则轮询查找，最多等待1秒
        let checkCount = 0
        const checkTimer = setInterval(() => {
          target = document.querySelector(to.hash)
          if (target || checkCount > 10) {
            clearInterval(checkTimer)
            if (target) {
              resolve({
                selector: to.hash,
                behavior: "smooth"
              })
            }
          }
          checkCount++
        }, 100)
      })
    }
    // 无hash时默认滚动到顶部
    return { x: 0, y: 0 }
  }
}

方案2：使用独立路由滚动配置文件（Nuxt2适用） #

在项目根目录新建 app/router.scrollBehavior.js，该文件配置优先级高于 nuxt.config 中的对应配置，通过短延迟等待DOM挂载完成，代码更简洁：

export default function (to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (to.hash) {
        resolve({
          selector: to.hash,
          behavior: 'smooth'
        })
      } else {
        resolve({ x: 0, y: 0 })
      }
    }, 100)
  })
}

方案3：目标页面手动处理滚动 #

在 parent.vue 中添加挂载和路由监听逻辑，手动触发滚动：

export default {
  mounted() {
    this.handleHashScroll()
  },
  watch: {
    '$route.hash': 'handleHashScroll'
  },
  methods: {
    handleHashScroll() {
      const hash = this.$route.hash
      if (!hash) return
      const targetEl = document.querySelector(hash)
      if (targetEl) {
        targetEl.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }
}

三个方案任选其一即可解决跨页面hash定位失效的问题。

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