在前端开发中，路由是一个非常重要的概念，它通常用于页面之间的跳转和状态管理等场景。其中，路由的实现需要解析 URL，然后根据解析结果执行相应的操作。在本文中，我们将讨论 Router 中如何解析 URL，涉及到两种方式：window.history 和 API。同时，我们还将探讨默认行为对路由的影响，并提供一些示例代码，以加深读者对该主题的了解。
1. window.history
window.history 是 HTML5 提供的一个 API，它允许开发者在不重载页面的情况下修改浏览器历史记录栈中的当前条目。简单来说，就是我们能够通过 window.history.pushState() 方法向历史记录中添加一条记录，并在不刷新页面的情况下修改当前 URL，实现了在单页面应用中切换路由的效果。具体代码如下所示：
window.history.pushState({page: 'home'}, 'home', '/home');其中，第一个参数是一个对象，可以包含任意键值对，可以在需要时通过 window.history.state 获取。第二个参数是一个标签，可以在浏览器地址栏中显示，也可以为空。最后一个参数是一个 URL，决定了向历史记录中添加的条目的 URL。
2. API
除了 window.history 之外，还有一种方式可以解析 URL，那就是使用浏览器提供的 API（application programming interface）。在这种方式下，我们需要使用 location 对象来访问浏览器地址栏中的 URL，从而进行解析和修改。具体代码如下所示：
const url = new URL('https://www.example.com/path/to/file.html?key1=value1&key2=value2');
console.log(url.pathname); // 输出 /path/to/file.html
console.log(url.search); // 输出 ?key1=value1&key2=value2在上述示例代码中，我们使用了 URL 对象，通过传入一个 URL 字符串，可以获取该 URL 的各个部分，包括协议、主机、路径、查询参数等。
3. 默认行为
在浏览器中，URL 的解析不仅仅由开发者手动控制，还受到浏览器默认行为的干扰。比如，在访问链接时，浏览器默认会向服务器发送 GET 请求，从而获取该链接对应的网页。如果我们想要更改默认行为，可以使用事件对象的 preventDefault() 方法来阻止浏览器的默认行为。具体代码如下所示：
document.querySelector('.link').addEventListener('click', function (event) {
event.preventDefault(); // 阻止跳转
});在上述示例代码中，我们使用 querySelector() 方法来获取一个 class 为“link”的元素，并为其添加了 click 事件监听器。在事件监听器中，我们使用了 preventDefault() 方法阻止了浏览器的默认行为，从而实现了不让链接跳转的效果。
4. 总结
通过本文的阐述，我们了解了两种解析 URL 的方式：window.history 和 API，并探讨了默认行为对路由的影响。在实际工作中，我们需要根据具体需求选择适合的方式来解析 URL，灵活运用阻止默认行为，并提供更好的用户体验。
5. 示例代码
HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---------- ------- ------ -- --------------------- -- ----------------------- -- --------------------------- ---- ------------------- ------- --------------------------- ------- -------
JavaScript 代码（router.js）：
-- -------------------- ---- -------
----- ------- - -----------------------------------
-------- ----------------- -
----------------- - --------------------
-
-------- ------------------ -
----- ---- - ------------------------------
-- ----- --- ------- -
---------------- -------
- ---- -- ----- --- -------- -
----------------- -------
- ---- -- ----- --- ---------- -
------------------- -------
-
-
------------------------------------- ------------------在上述示例代码中，我们使用了 window.location.hash 和 hashchange 事件来解析 URL，实现了在单页面应用中切换路由的效果。同时，我们还使用了 renderPage() 方法来渲染页面，实现了页面内容的动态修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499993648841e989469bb27