一、什么是‘前端路由’
- 路由是根据不同的url地址展示不同的内容或者页面。
- 前端路由就是把不同的路由对应的内容或者页面交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现,前端路由将不需要请求服务器,就能根据不同的url实现不同的内容和页面。
二、为什么使用路由
传统web开发每一个请求地址都会请求服务器来处理,但是用户的有些操作并不需要请求服务器,直接修改下页面的逻辑就能满足需求,这个时候如果再请求服务器就会大大降低用户的体验,所以这个时候最好使用前端路由来实现。当然,直接使用js处理也能满足需求,但是js处理并不会改变页面的地址,用户也就无法收藏当前页面,js并不会更新页面的url。而使用前端路由,url是跟着改变的,这种方式对于搜索引擎和用户都是友好的。
三、前后端路由区别
后端路由意味着浏览器刷新页面,网速慢的时候可能屏幕全白然后才有新内容出现。前端路由可以随意控制,逻辑也是在前端。从性能和用户体验层面来说,后端每次访问一个新的页面都需要向服务器发送请求,然后服务器再响应请求,这个过程是有延迟的。而前端路由访问一个新页面的时候只是改变了路径而已,并不存在网络延迟,用户体验会好很多。
四、路由分层解析
路由——url的分层解析
第一层:解析到服务器目标机器,这个通常是域名或ip。
第二层:解析到服务器的特定资源文件。这个通常是pathinfo。
第三层:解析特定资源的特定状态。包含在pathinfo参数中。
主要是服务器,资源文件,特定状态定位。
五、前端路由适用场景
前端路由更多应用在单页面应用上,也就是spa,因为单页面应用基本上都是前后端分离的,后端自然不会提供路由给前端。
在单页面应用,大部分页面结构不变,只改变部分内容。
六、前端路由的优缺点
优点:
用户体验好,不需要每次都请求服务器获取页面和内容,就能快速展示给用户。
缺点:
使用浏览器的前进、后退的时候会重新发送请求,没有合理利用缓存
单页面无法记住之前的滚动位置,无法再前进、后退的时候记住滚动位置
七、前端路由实现
1、改变hash值,监听onhashchange事件,这种方式优点是兼容低版本浏览器
2、通过historyAPI监听popState事件,用pushState和replaceState来实现