彻底讲清楚history和hash的区别-CSDN博客

本文链接：https://blog.csdn.net/fageaaa/article/details/141897389

彻底讲清楚history和hash的区别

1.路由的设计理念
2.超链接和锚点
- 2.1 简介
- 2.2 示例代码
3.hash原理
4.history原理
5.hash VS history
6.一点补充

1.路由的设计理念

在讲路由hash和history模式之前,先简要说一下路由的设计理念。路由并不是某个框架特有的,它是一种设计思想。其目的是让页面的url路径改变但整个html页面不重新加载(单页面应用是局部刷新页面的),这使得我们不能使用普通的超链接方式实现路由。我们需要建立url路径和根页面中dom元素的映射关系。

2.超链接和锚点

2.1 简介

锚点其实就是超链接的一种,它是一种特殊的超链接,有一个#号,点击a标签后,网址url路径就会在之前的路径上加上#及#后面的内容。(我们经常使用锚点去找到页面中某元素的位置,这对于大家来说应该不陌生)。

2.2 示例代码

下面是锚点代码:

在这里插入图片描述

点击about出现相应的界面:

在这里插入图片描述

3.hash原理

3.1 原理

通过动态锚点技术重写url路径,会在原有的url基础上加上“/#/xxx”,这种方式可以在不重新加载原有html文件的基础上,实现切换url路径的目的,然后通过onhashchange监听url路径的变化,来实现对相应dom元素的隐藏和显示,这样子看起来就像是整个页面在切换。

3.2 模拟hash模式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
      .container{
         display: none;
      }
      .index{
        width: 400px;
        height: 400px;
        background-color: #61dafb;
      }
     .about{
        width: 400px;
        height: 400px;
        background-color: #61dafb;
      }
   </style>
</head>
 <body>
   <div>
     <a href="#/index">首页</a>
     <a href="#/about">关于</a>
     <div class="container index">
        首页内容
     </div>
     <div class="container about">
        关于内容
     </div>
   </div>
   <script>
       window.onhashchange=function (event){
          //截取新路径中#后面的部分
         let newHash=event.newURL.split("#/")[1];
        //截取旧路径中#后面的部分
         let oldHash=event.oldURL.split("#/")[1];
        //获取不同路径所对应页面的dom容器
         let newContainer=document.querySelector('.'+newHash);
         let oldContainer=document.querySelector('.'+oldHash);
         //显示"新页面"容器
        newContainer.style.display="block";
        //隐藏"旧页面"容器
        if (oldContainer){
          oldContainer.style.display="none";
        }
       }
   </script>
</body>
</html>

3.3 页面展示

先进入页面:

在这里插入图片描述

点击关于之后,显示关于页面的内容,在路径url中新增了“#/about”。

在这里插入图片描述

4.history原理

4.1 原理

history模式与hash模式不同,它不是通过动态锚点来改变url路径,所以路径中不会带#号。history采用的是history对象中的pushState()函数重写url路径(不熟悉pushState的朋友去看看javascript中浏览器对象模型这部分的知识)。

4.2 模拟history模式

    <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
       .container{
         display: none;
       }
       .index{
         width: 400px;
         height: 400px;
         background-color: #61dafb;
       }
      .about{
         width: 400px;
         height: 400px;
         background-color: #61dafb;
       }
     </style>
   </head>
   <body>
       <div>
         <a href="javascript:jump('/index')">首页</a>
        <a href="javascript:jump('/about')">关于</a>
        <div class="container index">
          首页内容
        </div>
        <div class="container about">
          关于内容
        </div>
      </div>
      <script>
        function jump(path){
          //通过pushState重写url路径
          history.pushState(null,'page',path);
          //获取所有“页面”的dom元素
          let containers=document.querySelectorAll(".container");
          //获取当前要跳转的页面的dom元素
          //下面这一行是模拟(目的是通过映射关系从path找到相应页面的dom元素)
          let newContainer=document.querySelector(path.replace('/','.'));
          //把所有“页面”的dom元素隐藏
          containers.forEach(container=>{container.style.display="none"})
          newContainer.style.display="block";
        }
      </script>
   </body>
   </html>

4.3 页面展示

先进入页面:

在这里插入图片描述

点击关于之后，显示关于内容,但这时候url路径发生了巨大的变化,不是在之前的基础上添加了"/about",而是直接跳到了一个新的路径。

在这里插入图片描述
此时刷新页面,会直接出现404。

在这里插入图片描述
这是因为在history模式时,页面url发生了大变化,计算机根本不能通过新url在项目中找到相应的文件;hash刷新则不会这样子，因为hash模式下的新url有个#隔开,它可以作为标记,隔断新url,计算机是通过新url被#分隔的前一部分的字符串去项目中找文件的,而前半部分字符串内容不变,所以刷新也是能找到正确的资源的。

5.hash VS history

外观上(表面)
hash: 带有#号,不美观。
history: 没有#号,更美观一些。
实现原理(本质)
hash: 通过动态锚点技术加window对象的onhashchange方法实现。
history: 通过history对象的pushState实现。
应用场景
hash: hash模式的项目通过第三方app分享,其地址可能会被标记为不合法地址。
history: history模式的项目部署到服务器后直接刷新可能会报404,这需要后端通过重定向来解决此类问题。