彻底讲清楚history和hash的区别
(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,这需要后端通过重定向来解决此类问题。
(6)一点补充
在项目开发阶段,很多人使用脚手架开发,会用到history模式。在页面刷新之后也没有报404,这看似与上面说的前后矛盾。但这是因为vue脚手架内部解决了history的这一问题,如果把项目部署到服务器上,这时候脱离了脚手架环境,直接刷新就会出现404问题。