跳到主要内容

认识

2024年03月06日
柏拉文
越努力，越幸运

一、认识​

路由分为 服务端路由 和 客户端路由。

1.1 服务端路由​

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。

1.2 客户端路由​

在单页应用中，一个web项目只有一个html页面，一旦页面加载完成之后，就不用因为用户的操作而进行页面的重新加载或者跳转，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验。路由特性如下:

  • 改变 url 且不让浏览器像服务器发送请求

  • 在不刷新页面的前提下动态改变浏览器地址栏中的URL地址

路由主要分成了两种模式:

  • Hash 模式: 在url后面加上#，如http://127.0.0.1:5500/home/#/page1

  • history 模式: 允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录

二、模式​

2.1 hash 模式​

hash 模式 通过 hashchange 事件监听 url 中的 hash 值变化, 执行相应的视图更新逻辑。hash 值的变化不会随请求发送到服务端, 所以改变 hash, 不会重新加载页面。

2.2 history 模式​

history 模式通过 HTML5 History API 来实现, API 如下:

  • history.pushState: 浏览器历史记录添加记录, 不会触发 popstate 事件, 不会触发页面刷新, 因此需要手动执行视图更新逻辑

  • history.replaceState: 修改浏览器历史记录中当前记录, 不会触发 popstate 事件, 不会触发页面刷新, 因此需要手动执行视图更新逻辑

  • popState 事件: 当 history 发生变化时触发, 执行对应的视图更新逻辑

history 模式下, 通过 pushState 或者 replaceState 改变页面地址后, 刷新浏览器, 如果服务端没有对改变之后的 url做相应的处理, 会出现 404 页面。