hash路由模式

原创已于 2024-01-17 08:03:39 修改 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#hash

于 2023-11-16 17:04:36 首次发布

React-Router 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了React-Router中的hash模式，包括其工作原理、如何通过hash值切换UI、锚点应用以及注意事项，重点强调了hash模式对服务器的影响和浏览器历史记录的处理。

更多内容，请访问：两种路由模式及React-Router中的History库源码分析

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作用

路由

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>

定位

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对象变化的事件）