前端路由原理

135 阅读1分钟

前端路由中我们主要是利用 history api 或者改变 hash 值不会使页面重新加载,然后监听路由的变化来做到触发对应时间加载对应资源来重新绘制页面。

路由模式

  • hash 路由模式
  • history 路由模式

hash 路由模式

基于onhashchange 事件 和 location.hash 实现, hash 是以 # 符号标记起的部分,虽然其值会显示在 url 上,但不会被包括在 http 请求中,因此对后端不会造成影响,所以不会导致重新加载页面。

history 路由模式

基于 location.history 相关 api history.replaceState()、history.pushState 来切换路由且不会导致重新加载页面。 不过 history 路由模式携带的参数会随着页面的刷新被携带在 http 请求中,导致页面刷新,从而丢失页面

history 模式需要后台配置支持,最简单的是通过 nginx 配置 try_files 指令。

location / {
  try_files $uri $uri/ /index.html;
}

路由用来设定访问路径,并将路径与相应的组件映射起来,用户在访问相应的路径时,路由根据映射关系实现不同组件间的切换,整个过程都是在同一个页面中实现,不涉及页面间的跳转,也就是我们常说的单页应用