vue-router源码疑问，hash模式下为什么还要判断supportsPushState？而不直接去用hash的方法？

Question

最近看vue-router源码的时候，发现在hash模式下push或replace这个path的时候，会先判断是否支持h5的PushState方法，如果支持就用新的，不支持才使用location.hash或location.replace。

我知道hash和history的优缺点，但是这里我们已经明确使用hash模式了，但是为什么源码中还是要去做判断，如果支持就用新方法？不太理解为什么这么做？这么做的优势是什么？

// hash.js
function pushHash (path) {
  // 这里为什么要去判断？？？？？？？？
  if (supportsPushState) {
    pushState(getUrl(path))
  } else {
    window.location.hash = path
  }
}

function replaceHash (path) {
  // 这里为什么要去判断？？？？？？？？
  if (supportsPushState) {
    replaceState(getUrl(path))
  } else {
    window.location.replace(getUrl(path))
  }
}

Answer 1

你还能约束用户用啥浏览器访问？

你就算设个 hash 模式，用户用 IE9 / Android 4.0 Google Browser 访问，咋办？

---

你说 ok，这些不支持的浏览器就让它们去死吧！我就要只跑在兼容的浏览器上面。

问题是，vue-router 也不是你写的啊，凭啥让人家就不兼容了？

Answer 2

可能有人没理解题主的意思

---

我觉得跟优雅降级和可访问性和兼容这个没关系吧

他问的是 用了hash的情况为什么要用history模拟hash的方式进行跳转

优雅降级是设置了history，在浏览器不支持history的情况下用hash

具体的看这条记录commit feat: enhance hashHistory to support scrollBehavior

是为了支持scrollBehavior

具体原因是window.history.pushState可以传参key过去，这样每个url历史都有一个key，用key保存了每个路由的位置信息

Answer 3

这是为了考虑页面的可访问行和优雅降级。

Answer 4

没有彻底读过 vue-router 的源码，前两天看到这个问题也很好奇就关注了一下
今天看 vue-router 文档发现了这个 https://router.vuejs.org/zh/a... 参数
感觉设计者的思路除了 李十三答主 提到的还有就是为了兼容更多浏览器