阅读 77

前端路由、服务端渲染路由以及后端路由

路由基础知识

因为我们是前端对路由应该加一重视,路由的重要性,代表了就跟你是不是有跳槽的勇气一样。如果连跳槽的勇气都没有,拿什么谈未来?路由就是一次页面的跳槽。是通往理想的道路。搞搞清楚路由之前先要搞明白,路由需要哪些基础知识。

前端路由

我们知道路由需要的基础知识,就是浏览器url的变化。即我们需要location对象。如果已经了解 Vue 和 React 或者 Angular 的同志。都知道实现前端路由其实就是就是监听 url 的变化。由于 h5 的到来,我们有两种方式实现路由:

  • hash
  • h5 history API

React-router

  • 触发跟新路由,Link/编程式导航
  • location 的更新
  • 更新 state
  • 路由匹配
  • 新的 state
  • 更新 UI

ReactRouter 的钩子函数 hook

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

Vue-Router

VueRouter 主要的流程

  • 使用VueRouter
  • 注册路由表
  • 理解路由对象
  • 路由匹配
  • 路由过渡

Angular-Router

服务端渲染路由

服务端渲染路由比较特殊,不是纯前端的实现的路由,也不是纯后端的路由。它是在前后端渲染能力的配置。一般用于首页时,采用服务端渲染。其他的时候使用客户端(浏览器端的渲染能力)。其实我们要明白的是,客户端渲染,前后端分离的其实在很大的程度上解放了服务器压力。把一部分压力交给了客户端。但是这样有个不好的地方就是,SEO 等能力变的不好了。服务端渲染也是重新接管了,原来客户端的渲染的能力,来弥补这部分的不足。但是前端路由和后端路由的配合就成了我们要解决的第二个问题。

服务端路由

我们在使用 Vue/React 等框架做服务端渲染的时候,路由不在是由纯前端进行路由。

后端路由

后端路由思路就很好理解了,到接收到客户端的不同的请求的时候。我们可以根据不同的路由对其进行不同的处理。后端的路由显得更加纯粹。

express -router

koa-router

nestjs-router

GraphQL

我们使用了 GraphQL 后,就没有后端的路由的概念。使用了查询 API。

参考