点击Hash锚点首次触发页面重载，二次点击才正常滚动的问题

问题描述 #

点击带有href='#title'的锚点时，期望页面滚动到包含id='title'的元素，但首次点击会触发页面重载，只有二次点击时滚动行为才正常生效。当前使用vue-router，router.options配置如下：

import type { RouterOptions } from '@nuxt/schema'

export default <RouterOptions>{
  strict: true,
  scrollBehavior: function (to, _from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return {
        el: to.hash,
      }
    } else {
      return {
        left: 0,
        top: 0,
      }
    }
  },
}

解决方案 #

• 改用vue-router的<RouterLink>替代原生<a>标签
  原生<a>标签的href会触发浏览器默认跳转逻辑导致页面重载，换成<RouterLink>组件让路由走vue-router内部处理：

  <RouterLink :to="{ path: $route.path, hash: '#title' }">跳转到标题</RouterLink>
  

• 优化scrollBehavior函数
  首次点击时目标DOM元素可能未完全渲染，添加异步等待确保元素存在后再执行滚动：

  scrollBehavior: async function (to, _from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    }
    if (to.hash) {
      // 等待DOM更新，确保目标元素已挂载
      await new Promise(resolve => setTimeout(resolve, 100))
      const targetEl = document.querySelector(to.hash)
      if (targetEl) {
        return {
          el: to.hash,
          behavior: 'smooth' // 可选，开启平滑滚动
        }
      }
    }
    return { left: 0, top: 0 }
  }
  

• 尝试关闭路由严格模式
  配置中的strict: true会强制路由匹配的严格一致性，可能干扰哈希路由处理，尝试改为false：

  export default <RouterOptions>{
    strict: false,
    // ...其他配置
  }
  

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