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