前端路由和后端路由

目录

一：什么是路由?

二：前端路由的实现原理

1：hash:

2：history:

三：前端路由和后端路由的区别

---

一：什么是路由?

一个路由就是一个映射关系

路由分为前端路由和后端路由

前端路由：来源于服务端，在服务端中路由描述的是URL与处理函数之间的映射关系。

在WEB前端单页面SPA中，路由描述的是URL与UI之间的映射关系，这种映射是单向的，UI的变化引起UI更新（无需刷新页面）。

后端路由（服务端路由）：通过后端路由能找到对应的服务，其实是一个个服务所在的接口，ajax发请求的目的地。

二：前端路由的实现原理

1：hash:

hash是URL中hash(#)及后面部分，常用作锚点在页面内进行导航，改变URL中的hash部分不会引起页面刷新

通过hashchange事件监听URL的变化，改变URL的方式有：通过浏览器前进后退改变URL、通过<a><a/>标签改变URL、通过window.location改变URL,改变URL都会触发hashchange事件

2：history:

history提供了pushState和replaceState两个方法，这两个方法改变URL的path部分不会引起页面刷新

history提供popstate事件类似hashchange事件，但是不同的是：通过浏览器前进后退URL时会触发popstate事件，通过pushState/replaceState/<a>标签不会触发popstate事件，我们可以拦截pushState/replaceState的调用和<a>标签的点击事件检测URL的变化，监听URL变化可以实现。

三：前端路由和后端路由的区别

前端路由：在访问一个新页面的时候只是改变了路径，没有网路延迟，用户体验较好

后端路由：每次访问新页面都要向服务器发送请求，然后服务器在响应请求，这个过程会有延迟。