前端路由跳转的基本原理 - JavaScript

在前端开发中，路由跳转是一项重要的技术，它可以实现单页应用（Single Page Application）的页面切换和导航功能。本文将介绍前端路由跳转的基本原理，并提供相应的 JavaScript 源代码示例。

在传统的多页应用中，每个页面都对应一个完整的 HTML 文件。当用户点击链接或提交表单时，浏览器会向服务器发送请求，服务器返回相应的 HTML 页面。而在单页应用中，所有的页面都通过 JavaScript 加载，并且页面的切换是在前端完成的，不需要向服务器请求新的页面。

在单页应用中，路由跳转通过修改 URL 实现。URL（统一资源定位符）是用于定位和访问 Web 资源的地址。通过修改 URL 的不同部分，可以实现页面的切换和导航。

现代浏览器提供了一个名为 History API 的功能，它允许 JavaScript 修改浏览器的历史记录并且不刷新页面。History API 包含了一些方法和事件，用于管理浏览器的历史记录和 URL。

以下是一个简单的示例，演示了如何使用 JavaScript 修改 URL 并切换页面：

// 创建一个路由器对象
const router = {
   
  routes: