hash与history

关于Vue的路由一直以来个人都觉得是一件很神奇的事情，一个单页面应用居然可以做到多路由跳转并按需加载页面代码。

以往的做法都是通过锚点来定位对应的页面代码，而这种古老的操作方式最大的问题就是首屏加载缓慢，一次性加载了所有页面代码。

 

那么Vue-router又是怎么实现的呢？

首先，这个router有两种模式：hash模式（默认）、history模式（需配置mode: 'history'）

 

hash与history的区别  

	hash	history
url显示	有#，很Low	无#，好看
回车刷新	可以加载到hash值对应页面	一般就是404掉了
支持版	支持低版本浏览器和IE浏览器	HTML5新推出的API

 

然后，我们来研究下两者的原理：

hash模式

我们先来认识下这位朋友#，这个#就是hash符号，中文名哈希符或锚点，当然这在我们前端领域姑且这么称呼。

然后哈希符后面的值，我们称之为哈希值。OK，接下来我们继续分析他的原理。路由的哈希模式其实是利用了window可以监听onhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，前端是可以做到监听并做一些响应（搞点事情），这么一来，即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。

后来人们给他起了一个霸气的名字叫前端路由，成为了单页应用标配。

大伙可以围观下网易云音乐的url模式：https://music.163.com/#/friend

 

history模式

我们先介绍一下H5新推出的两个神器：pushState与replaceState

具体自行百度，简而言之，这两个神器的作用就是可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404。

那么如何去解决history模式下刷新报404的弊端呢，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html），前后端联手，齐心协力做好“挂羊头卖狗肉”的完美特效。

至此，我们的前端路由在实现与展示效果上又更进了一步！

总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

 

总结

传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。

而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。