前端两种路由模式 hash 和 history

 hash 模式 url 带 # 号，history则不带.... ....

本文到此结束... ... （呵呵，不可能）

1.hash

早期的前端路由就是基于location.hash实现的，其原理很简单，location.hash的值就是URL中的#后面的内容，比如：http://www.word.com#search，他的location.hash的值就是：#search

hash路由模式的实现主要是基于下面几个特性

    1. URL中的hash值只是客户端的一种状态，也就是说，当向服务器发送请求时，hash部分不会被发送；

    2. hash值的改变会在浏览器的访问历史中增加一个记录，因此我们可以通过浏览器的回退、前进按钮控制hash值的切换；

    3. 可以通过<a>标签，设置href属性，当用户点击这个标签后，URL的hash值发生改变，或者使用JavaScript来对location.hash进行赋值，改变URL的hash值；

    4.  可以使用hashchange事件来监听hash的改变，从而对页面进行跳转（渲染）

2.history

HTML5提供了history  API 来实现URL的变化，其中主要的API有两个：

history.pushState()和history.replaceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史记录，唯一不同的是，前者是增加一个历史记录，后者是直接替换当前的历史记录，如：

window.history.pushState(null,null,path)
window.history.replaceState(null,null,path)

history路由模式的实现主要基于以下几个特性：

1. pushState和replaceState两个API来操作URL的变化；

2. 我们可以使用popstate事件来监听URL的变化，从而对页面进行跳转（渲染）

3. history.pushState()和history.replaceState()不会触发popstate事件，这时我们需要手动触发页面跳转渲染

history存在的问题

history虽然有很多有点，但是想要玩好这种模式，还需要后台配置支持，因为我们的应用是单页面复应用，如果后台没有正确的配置，当用户在浏览器直接访问   就会出现404，这就不好看了。

所以，需要在后端配置一个要覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个 index.html页面