如何使用vue-router实现滚动时动态更新URL哈希值？

问题1：该功能是否和ScrollBehavior相关？ #

• 二者没有直接关联。scrollBehavior是vue-router提供的路由跳转后控制页面滚动位置的配置，作用是「路由哈希变化后让页面滚到对应锚点」，和你要实现的「页面滚动时自动更新URL哈希」是反向逻辑。
• 如果后续你需要实现点击修改哈希后自动定位到对应区块的效果，可以搭配scrollBehavior使用，当前需求不需要用到这个配置。

问题2：需要锚定的区块是否需要有共同属性？ #

• 没有强制要求。唯一的硬性规则是：所有要作为锚点的元素必须设置全局唯一的id属性，这个id就是URL哈希里对应的内容，和标签类型、是否有公共类名无关。
• 开发时你可以给所有锚点元素加统一的自定义属性（比如data-anchor="1"），方便后续快速筛选所有锚点元素，属于提升开发效率的可选方案，不是必须要求。

问题3：是否需要修改vue-router本身的配置项？ #

• 不需要修改vue-router的默认配置。你只需要监听页面滚动事件，判断当前进入视口的锚点元素，主动调用路由方法更新哈希即可，核心参考代码如下：

// 滚动事件处理函数
const onScroll = () => {
  // 筛选所有锚点元素，这里用自定义属性筛选，你可以根据自己的规则改
  const anchorList = document.querySelectorAll('[data-anchor]')
  const activeOffset = 80 // 自定义触发阈值，比如元素顶部距离视口顶部80px就算激活
  for (let anchor of anchorList) {
    const rect = anchor.getBoundingClientRect()
    if (rect.top <= activeOffset && rect.bottom >= activeOffset) {
      // 用replace更新哈希，不会新增历史记录，避免点后退要多次滚动
      router.replace({ hash: `#${anchor.id}` })
      break
    }
  }
}
// 页面挂载时绑定监听，卸载时移除，避免内存泄漏
onMounted(() => window.addEventListener('scroll', onScroll))
onUnmounted(() => window.removeEventListener('scroll', onScroll))

• 如果你担心更新哈希时触发页面自动滚动，可以在scrollBehavior里加判断逻辑，识别到是滚动触发的哈希更新时不执行滚动操作，避免页面抖动。

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