hash路由模式

hash模式

---

hash模式是一种把前端路由的路径用井号 # 拼接在浏览器 URL 后面的模式。

一个完整的 URL 包括：协议、域名、端口、虚拟目录、文件名、参数、锚。

https://www.wangyuegyq.top/utils/index.html?name=123&phone=123#home

• 协议：https
• 域名：www.wangyuegyq.top
• 端口号：443，https默认端口号是443，http默认端口号是80，默认端口号可以不写
• 虚拟目录：/utils
• 文件名：index.html
• 参数：name=123&phone=123
• 锚部分：home（#后面的值）

hash作用

---

1. 路由

   hash值的变化，会触发hashchange事件，这样我们就可以通过监听hashchanges事件来根据不同的hash值去渲染不同的UI，以实现路由切换的目的。

   更改路由方式：

   （1）a标签

   （2）location.hash、location.href

   （3）浏览器前进后退按键或者history.back、history.go、history.forward

   （4）history.pushState、history.replaceState（H5 history 新特性）

   <div>
     <a href="#home">首页</a>
     <a href="#article">文章</a>
     <div id="content"></div>
   </div>
   <script>
     window.onhashchange = (event) => {
       const hash = window.location.hash;
       const content = document.getElementById('content');
       if (hash === '#home') {
         content.innerHTML = '首页'; 
       } else if (hash === '#article') {
         content.innerHTML = '文章'; 
       }
     }
   </script>

2. 定位

   hash也称作锚点，DOM id 结合，可以用于页面定位。

   <div>
   <span id="hash-position">定位点</span>
   <a href="#hash-position">点击定位</a>
   </div>

hash特点

---

• hash的改变，不会访问服务器，不会刷新页面（hash 值是网页的标志位，HTTP 请求不包含锚部分，不会发送给服务器，对后端无影响）

• hash的改变，会触发hashchange监听事件

• hash的改变，会改变浏览器的历史记录

  

  这也是为什么当hash的改变(hash的改变会记录在window.hisotry中)，不仅仅可以出触发hashchange事件，还会触发popstate事件（监听history对象变化的事件）

注意事项：

---

1. 如果改变的hash值与当前的hash值一致时，hashchang不会改变，但是popstate事件会执行（location.href更改时，执行，但是location.hash更改时，不会执行，两者执行时，都不会创建一条新的历史记录）。

2. 哪怕新的hash值和当前的hash值相同时，history.pushState方法会创建一条新的历史记录

更多内容，访问:

history
hash
单页面应用和多页面应用
React-Router源码分析-History库
History库源码分析-Action 动作类型
History库源码分析-createLocation
History库源码分析-createPath
History库源码分析-parsePath