什么是前端路由

心已赠人 2022-06-14 04:26 296阅读 0赞

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。这篇文章主要和大家谈谈什么是前端路由，以及它的使用场景及优缺点  
1.什么是路由  
简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：  
  
http://10.0.0.1/  
http://10.0.0.1/about  
http://10.0.0.1/concat  
那么其路径就分别是 /，/about，/concat。  
当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。  
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作拿到前端来做。  
简单的说，路由是根据不同的 url 地址展示不同的内容或页面

2.前端路由

前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用 hash 来实现的话，它的 URI 规则中需要带上 \#。

1 http://10.0.0.1/
    2 http://10.0.0.1/#/about
    3 http://10.0.0.1/#/concat

Web 服务并不会解析 hash，也就是说 \# 后的内容 Web 服务都会自动忽略，但是 JavaScript 是可以通过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。  
history 是 HTML5 才有的新 API，可以用来操作浏览器的 session history。基于 history 来实现的路由可以和最初的例子中提到的路径规则一样。

1 http://10.0.0.1/
    2 http://10.0.0.1/about
    3 http://10.0.0.1/concat

具体如何实现前端路由将在后面的文章中介绍。

3.前端路由的使用场景？  
前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

4.前端路由优缺点

优点：  
1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。  
2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题  
缺点：

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