前端路由原理详解：hash 模式和 history 模式 | 深入理解 SPA 路由机制

前端路由是指在单页面应用中，通过改变 URL 来实现页面之间的切换和状态的变化。前端路由的原理主要是通过监听 URL 的变化，然后根据 URL 的不同加载对应的页面内容。\n\n前端路由的实现原理可以分为两种方式：hash 模式和 history 模式。\n\n1. hash 模式：\n在 URL 中的 # 后面的部分称为 hash，hash 值的变化不会导致页面的刷新，因此可以通过监听 window 对象的 hashchange 事件来实现路由的跳转。具体原理如下：\n- 通过 URL 的 hash 来标识不同的页面，例如 http://example.com/#/home。\n- 监听 window 对象的 hashchange 事件，当 hash 值发生变化时，根据不同的 hash 值加载对应的页面内容。\n- 通过修改 window.location.hash 的值来改变当前页面的 hash 值，从而实现页面的跳转。\n\n2. history 模式：\nHTML5 提供了 history API，可以通过改变 URL 的路径来实现前端路由。具体原理如下：\n- 使用 history.pushState() 方法可以修改 URL 的路径，但不会引起页面的刷新。\n- 监听 window 对象的 popstate 事件，可以在 URL 的路径发生变化时执行对应的操作。\n- 通过 history.pushState() 方法改变 URL 的路径，然后在 popstate 事件的回调函数中根据不同的路径加载对应的页面内容。\n\n总结来说，前端路由的原理是通过监听 URL 的变化，然后根据不同的 URL 加载对应的页面内容，从而实现页面之间的切换和状态的变化。