彻底讲清楚history和hash的区别

太阳与星辰

于 2024-09-04 17:28:36 发布

阅读量445

点赞数 12

分类专栏：前端面试 vue2 文章标签：前端 vue.js vue

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

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

面试

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

彻底讲清楚history和hash的区别

(1)路由的设计理念
(2)超链接和锚点
(3)hash原理
(4)history原理
(5)hash vs history
(6)一点补充

(1)路由的设计理念

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

(2)超链接和锚点

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

(3)hash原理

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

模拟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>
   ```

页面展示
操作过程如下,先进入页面

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

(4)history原理

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

模拟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>

页面展示
操作过程如下,先进入页面:

点击关于之后，显示关于内容,但这时候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,这需要后端通过重定向来解决此类问题。