URL API可直接解析URL，通过new URL(window.location.href)获取pathname和searchParams，结合路径匹配与查询参数解析，实现前端路由；再配合history.pushState和popstate事件，完成无刷新导航，适用于轻量级路由场景。
JavaScript中的URL API能直接解析和操作URL，非常适合在前端实现路由解析。通过构造URL对象，可以轻松提取路径、查询参数等信息，帮助判断当前应显示哪个视图或页面。
使用URL API解析当前地址
在浏览器环境中，你可以结合window.location.href与URL构造函数来解析当前页面的URL。
例如：
const url = new URL(window.location.href);
const pathname = url.pathname; // 获取路径部分
const params = url.searchParams; // 获取查询参数对象
这样就能获取用户访问的具体路径和携带的参数，用于前端路由匹配。
立即学习“Java免费学习笔记（深入）”；
提取路径进行路由匹配
前端路由通常根据pathname决定渲染哪个组件或页面。
比如你有以下路径规则：
- /home → 显示首页
- /user/123 → 显示用户详情，123为用户ID
- /settings → 显示设置页
可以用简单匹配逻辑处理：
if (pathname === '/home') {
// 渲染首页
} else if (pathname.match(/^\/user\/\d+$/)) {
const userId = pathname.split('/')[2];
// 加载用户数据
}
处理查询参数
URL API的searchParams属性让你方便地读取?后面的参数。
例如，解析 https://example.com/search?q=js&page=2：
const q = url.searchParams.get('q'); // "js"
const page = url.searchParams.get('page'); // "2"
这些参数常用于筛选、分页或跟踪来源，无需额外库即可解析。
配合History API实现无刷新路由
结合URL API和history.pushState()，可以在不刷新页面的情况下更新地址并维护路由状态。
示例：
function navigateTo(path) {
history.pushState({}, '', path);
handleRoute(); // 手动触发路由处理
}
同时监听popstate事件处理浏览器前进后退：
window.addEventListener('popstate', handleRoute);
每次路由变化时，handleRoute内部可再次使用URL API解析当前路径并更新界面。
基本上就这些。URL API简洁高效，搭配简单的逻辑就能实现轻量级前端路由，适合不需要框架的场景。
