彻底讲清楚history和hash的区别

1.路由的设计理念2.超链接和锚点2.1 简介2.2 示例代码

3.hash原理3.1 原理3.2 模拟hash模式3.3 页面展示

4.history原理4.1 原理4.2 模拟history模式4.3 页面展示

5.hash VS history6.一点补充

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

3.3 页面展示

先进入页面:

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

4.history原理

4.1 原理

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

4.2 模拟history模式

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,这需要后端通过重定向来解决此类问题。

6.一点补充

在项目开发阶段,很多人使用脚手架开发,会用到history模式。在页面刷新之后也没有报404,这看似与上面说的前后矛盾。但这是因为vue脚手架内部解决了history的这一问题,如果把项目部署到服务器上,这时候脱离了脚手架环境,直接刷新就会出现404问题。