前端路由Hash&History

前端路由：页面的url跳转规则匹配由前端来控制。主要有两种方式：

• hash模式：前端路由路径通过#拼接到真实的url后,#后的路径发生改变会触发hashchange()函数。
• history模式：H5新提供的特性,允许开发者直接修改前端路由，并不会重新发送请求。

hash模式

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。

• hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。
• hash 永远不会提交到 server 端。#后面的前端路由部分不会传入到服务器那块，因此也不利于SEO.

history模式

H5新提供的特性,允许开发者直接修改前端路由，并不会重新发送请求。 在不使用前端路由的情况下，url发生改变浏览器就会发送新的请求给服务端，并根据请求到的数据渲染新页面。但是在使用到了前端路由history模式，用户通过点击触发事件改变了url但是浏览器是不会重新发送请求的.

pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。

• 都会改变当前页面显示的url，但都不会刷新页面
• pushState是压入浏览器的会话历史栈中，会使得history.length加1，而replaceState是替换当前的这条会话历史，因此不会增加history.length

但是如果服务器没有相应的配置，刷新页面会出现404的情况。

一旦在某个路由下刷新页面的时候，想当于去该路径下寻找可访问的静态资源index.html，无果，报错

http://www.baidu.com/home 刷新请求 http://www.baidu.com/home.html文件，服务器上并没有这个资源.404报错

所以一般情况下，以nginx为例，告诉服务器，当我们访问的路径资源不存在的时候，默认指向静态资源index.html

location / {
  try_files $uri $uri/ /index.html;
}