Web中HashRouter与BrowserRouter选择

发表于 更新于 本文字数： 1k 阅读时长 ≈ 2 分钟
本文是作者对Web中HashRouter与BrowserRouter选择的介绍，包括Web中HashRouter与BrowserRouter选择的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Web中HashRouter与BrowserRouter选择的效率。

SPA技术下，对于WEB前端路由，有两个选项HashRouter，BrowserRouter，两个选择，有利有弊，需要根据实际情况去选择，这里就总结下。

HashRouter vs BrowserRouter

  1. 两种路由展示形式不同，HashRouter使用的URL哈希形式(比如https://1991421.cn#posts)来区分各个路由URL，而BrowserRouter使用的传统URL形式(比如https://1991421.cn/posts)来区分

  2. BrowserRouter需要后台进行一定的设置，因为用户可能在某个URL下是可以执行浏览器刷新，这事服务端收到请求，那么需要确保该路由下，返回SPA的宿主页面，当然HashRouter不需要

    1
    2
    3
        app.get('*', function (req, res) {
        res.sendFile(path.join(__dirname + '/index.html'));
    });

  3. HashRouter因为利用的URL Hash，假如页面内部有目录锚点，而目录锚点如果放在URL上就会造成额外的问题，比如这样一个URLhttps://1991421.cn/#posts/detail/1234567#comment如果想获取目录锚点comment，使用location.hash结果将是#posts/detail/1234567#comment，这种情况下只能文本匹配。

  4. HashRouter地址如果是表单提交，本身hash部分是不会作为地址的一部分发出

结论

  • 综上可以发现两种路由利弊都有，原则上还是按需所取
  • 假如都行，明显采用BrowserRouter会更好些，因为这样不会出现表单提交，业内目录灯新的问题出现，唯一注意的是后台需要一点配置支持。

SPA路由实现原理

  • BrowserRouter利用H5新特性History来进行URL的改变及状态追踪

    • history.pushState向当前浏览器会话的历史堆栈中添加一个状态（state）。当前浏览器会话地址栏会替换为新的。

  • 而HashRouter利用location.hash来进行URL改变及状态追踪

    • onhashchange来进行hash改变监听

注意，因为都是前端路由方案，因此URL变化并不会造成页面reload

写在最后

前端路由无论哪种方案，本身是为了解决URL切换下，展示不同内容，但这个路由注册机制本身由前端提供，仅此而已。