浏览器-路由的模式

前言：

---

路由这概念最开始是在后端出现的，在前后端不分离的时候，由后端来控制路由，服务器接收客户端的请求，解析对应的url路径，并返回对应的页面/资源。简单的说，路由就是根据不同的url地址来展示不同的内容或页面。

现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，虽然Ajax解决了用户交互时体验的痛点，但是多页面之间的跳转一样会有不好的体验，所以便有了spa(single-page application)使用的诞生。而spa应用便是基于前端路由实现的，所以便有了前端路由。

路由的实现方式：

---

路由需要实现三个功能：

• 当浏览器地址变化时，切换页面；
• 点击浏览器【后退】、【前进】按钮，网页内容跟随变化；
• 刷新浏览器，网页加载当前路由对应内容；

在单页面web网页中, 单纯的浏览器地址改变, 网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式：

• hash模式：监听浏览器地址hash值变化，执行相应的js切换网页；
• history模式：利用history API实现url地址改变，网页内容改变；

两者之间的区别就是hash会在浏览器地址后面增加#号，而history可以自定义地址。

路由的实现：