前端路由原理

开始今天的话题之前，让我们先来了解一下前端路由，Ajax诞生以后，解决了每次用户操作都要向服务器端发起请求重刷整个页面的问题，但随之而来的问题是无法保存Ajax操作状态，浏览器的前进后退功能也不可用，当下流行的两种解决方法是：

1. hash, hash原本的作用是为一个很长的文档页添加锚点信息，它自带不改变url刷新页面的功能，所以自然而然被用在记录Ajax操作状态中了。
2. history, 应该说history是主流的解决方案，浏览器的前进后退用的就是这个，它是window对象下的，以前的history提供的方法只能做页面之间的前进后退，如下：

为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：

• history.go(number|URL) 可加载历史列表中的某个具体的页面
• history.forward() 可加载历史列表中的下一个 URL
• history.back() 可加载历史列表中的前一个 URL

为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：

• history.pushState(state, title, url)
  添加一条历史记录， state用于传递参数，可以为空。title是设置历史记录的标题，可以为空。url是历史记录的URL，不可以为空。
• history.replaceState(state, title, url)
  将history堆栈中当前的记录替换成这里的url，参数同上。

还有一个事件在window对象下：

window.onpopstate() 监听url的变化，会忽略hash的变化（hash变化有一个onhashchange事件），但是前面的两个事件不会触发它。

好了，到这里你大概猜到了单页面应用或者Ajax操作记录状态用的就是hash和h5增加的history API，这就是react-router-dom 扩展的路由实现，也是web应用最常用的两种路由。