什么是前端路由

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

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

其实前端路由要做的就是两点：

• 在页面不刷新的情况下实现url的变化
• 捕捉url的变化，根据url更改页面内容

hash

hash是url中#后面的部分，服务器会自动忽略这部分，但是前端可以通过location.hash来获取。
当hash发生变化时，会触发hashchange事件，我们可以为这个事件指定一个回调，这样就能在hash变化时进行不同内容的展示。

使用hash的好处是支持低版本浏览器和IE浏览器。

history API

是HTML5新推出的API，可以允许我们操作浏览器的会话历史记录。

• pushState与replaceState

history.replaceState(dataObj,title,url);
history.pushState(dataObj,title,url);

这两种方法都用于对浏览器的历史栈进行操作,pushState是向当前历史栈的栈顶增加数据，而replaceState则是替换当前栈顶的数据。

这两种方式都可以将url替换并且不刷新页面。

• popstate事件
  当活动历史记录条目更改时，将触发popstate事件。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

这也就是说，我们在使用history API改变浏览器的url时，仍需要额外的步骤去触发 popstate 事件，例如调用 history.back() 或 history.forward() 等方法。