前端路由两种模式：hash与history

概述

1. hash

2. history

SPA需要在不刷新页面的情况下做页面更新，这就需要前端路由。实际上，前端路由是利用浏览器的hash和history属性

hash

hash(url中#后面的部分)虽然出现在URL中，但不会被包含在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

当hash改变时，会触发hashchange事件，监听该事件，对页面进行更新。

window.onhashchange = function(){
  ......
}

history

history利用了html5 history interface 中新增的pushState()和replaceState()方法。这两个方法应用于浏览器记录栈。

在当前已有的back、forward、go基础上，他们提供了对历史记录修改的功能；pushState传入url直接压入历史记录栈，replaceState将传入url替换当前历史记录栈。

当它们执行修改时，虽然改变了当前URL，但浏览器不会立即向后端发送请求。

pushState()、replaceState()方法接受三个参数：stateObj、title、url

history.pushState({color:"red"},"red",red);
window.onpopState = function(event){
  if(event.state && event.state.color === "red") {
    document.body.style.color = "red";    //更新页面内容
   }
}

history & hash

history优点：

1. pushState设置的url可以是同源下的任意url；而hash只能修改#后面的部分，因此只能设置当前url同文档的url。
2. pushState设置的新url可以与当前url一样，这样也会把记录添加到栈中；hash设置的新值不能和原来的一样，一样的值不会触发动作将记录添加到栈中。
3. pushState通过stateObject参数可以将任何数据类型添加到记录中；hash只能添加短字符串。
4. pushState可以设置额外的title属性供后续使用

history缺点：

history在刷新页面时，如果服务器中没有相应的响应或资源，就会返回404。因此，如果URL匹配不到任何静态资源，则应该返回同一个index.html页面。

参考：

• https://www.jianshu.com/p/3b4abc20ae0f