路由

一、什么是‘前端路由’

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

二、为什么使用路由

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

三、前后端路由区别

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

四、路由分层解析

  路由——url的分层解析

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

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

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

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

五、前端路由适用场景

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

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

六、前端路由的优缺点

  优点:

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

  缺点:

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

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

七、前端路由实现

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

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

原文地址:https://www.cnblogs.com/sup9278/p/7416832.html