JavaScript实现hash.location值一致时的页面重载方案

常规浏览器逻辑下，只有hash值发生变更时才会触发hashchange事件、锚点滚动或路由跳转，hash值无变化时不会产生任何交互响应，因此需要在按钮的点击逻辑中主动做同hash场景的特殊处理。

普通多页应用方案 #

直接在按钮点击回调中增加hash值比对分支：

• 若当前window.location.hash与目标值#feed不相等，走原有逻辑将hash设置为#feed，触发正常的锚点定位/页面跳转流程
• 若二者完全相等，直接调用window.location.reload()即可触发页面重载，重载过程会自动保留当前URL携带的#feed锚点，无需额外修改地址

示例代码：

const TARGET_HASH = '#feed'
const feedBtn = document.querySelector('你的feed按钮选择器')

feedBtn.addEventListener('click', () => {
  if (window.location.hash !== TARGET_HASH) {
    window.location.hash = TARGET_HASH
    return
  }
  // 同hash下强制重载，自动保留现有#feed锚点
  window.location.reload()
})

单页应用（SPA）适配方案 #

如果不希望触发浏览器整页刷新，仅需要重新加载#feed对应的视图数据，可以通过临时变更hash的方式触发路由刷新逻辑：

• 检测到当前hash已经是#feed时，临时给hash拼接一个无感知的时间戳参数，主动触发hashchange事件拉取最新的feed内容
• 待视图加载完成后，再将hash改回标准的#feed值，保证地址栏展示无异常

示例代码：

if (window.location.hash === TARGET_HASH) {
  // 拼接临时参数触发hashchange，避免hash无变化导致的路由不更新
  window.location.hash = `${TARGET_HASH}?t=${Date.now()}`
  // 视图内容/数据加载完成后，还原为标准hash值
  window.location.hash = TARGET_HASH
}

常见注意点 #

• 调用window.location.reload()后如果页面没有自动定位到feed区块，可以在页面初始化完成后补充手动滚动逻辑，将视图锚定到feed元素位置
• 临时参数触发hashchange的方案可以增加简单的状态锁，避免用户连续点击按钮时触发重复的接口请求

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