路由

一、什么是‘前端路由’

• 路由是根据不同的url地址展示不同的内容或者页面。
• 前端路由就是把不同的路由对应的内容或者页面交给前端来做，之前是通过服务器根据url的不同返回不同的页面实现，前端路由将不需要请求服务器，就能根据不同的url实现不同的内容和页面。

二、为什么使用路由

　　传统web开发每一个请求地址都会请求服务器来处理，但是用户的有些操作并不需要请求服务器，直接修改下页面的逻辑就能满足需求，这个时候如果再请求服务器就会大大降低用户的体验，所以这个时候最好使用前端路由来实现。当然，直接使用js处理也能满足需求，但是js处理并不会改变页面的地址，用户也就无法收藏当前页面，js并不会更新页面的url。而使用前端路由，url是跟着改变的，这种方式对于搜索引擎和用户都是友好的。

三、前后端路由区别

　　后端路由意味着浏览器刷新页面，网速慢的时候可能屏幕全白然后才有新内容出现。前端路由可以随意控制，逻辑也是在前端。从性能和用户体验层面来说，后端每次访问一个新的页面都需要向服务器发送请求，然后服务器再响应请求，这个过程是有延迟的。而前端路由访问一个新页面的时候只是改变了路径而已，并不存在网络延迟，用户体验会好很多。

四、路由分层解析

　　路由——url的分层解析

　　第一层：解析到服务器目标机器，这个通常是域名或ip。

　　第二层：解析到服务器的特定资源文件。这个通常是pathinfo。

　　第三层：解析特定资源的特定状态。包含在pathinfo参数中。

　　主要是服务器，资源文件，特定状态定位。

五、前端路由适用场景

　　前端路由更多应用在单页面应用上，也就是spa，因为单页面应用基本上都是前后端分离的，后端自然不会提供路由给前端。

　　在单页面应用，大部分页面结构不变，只改变部分内容。

六、前端路由的优缺点

　　优点：

　　　　用户体验好，不需要每次都请求服务器获取页面和内容，就能快速展示给用户。

　　缺点：

　　　　使用浏览器的前进、后退的时候会重新发送请求，没有合理利用缓存

　　　　单页面无法记住之前的滚动位置，无法再前进、后退的时候记住滚动位置

七、前端路由实现

　　1、改变hash值，监听onhashchange事件，这种方式优点是兼容低版本浏览器

　　2、通过historyAPI监听popState事件，用pushState和replaceState来实现