javascript 面向对象实现简易前端路由控制器，封装路由注册、匹配、跳转及生命周期管理；通过 history api 操作 url，监听 popstate，支持参数解析、钩子机制与 query/hash 解析，不依赖框架且解耦渲染。
用 JavaScript 面向对象方式实现简易前端路由控制器，核心是封装路由注册、匹配、跳转和生命周期管理逻辑，避免直接操作 window.location 或重复手动解析 URL。
定义 Router 类并维护内部状态
创建一个 Router 构造函数或 ES6 class，保存路由表（path → handler 映射）、当前路径、是否已启动等状态。不依赖外部框架，用原生 API 实现监听：
- 用
history.pushState()和history.replaceState()改变 URL 而不刷新页面 - 监听
popstate事件响应浏览器前进/后退 - 首次加载时手动触发一次匹配（因为初始页面不会触发
popstate）
支持声明式路由注册与参数提取
提供 add(path, handler) 方法注册路由，支持带命名参数的路径（如 /user/:id），内部用正则动态解析：
- 将
/user/:id编译为^\/user\/([^\/]+)\/?$ - 执行匹配时提取
id并传给 handler，例如{ id: '123' } - handler 可以是函数，接收
{ params, query, hash }对象
内置导航方法与钩子机制
暴露 go(path)、back()、forward() 等方法，并支持全局前置/后置钩子：
-
beforeEach((to, from, next) => { ... })：可异步校验权限或加载数据 -
afterEach((to, from) => { ... })：适合埋点、更新 document.title - 每个 handler 内部也可定义
beforeEnter局部守卫
自动解析 query 和 hash 并解耦渲染
路由控制器本身不负责 DOM 渲染，只做路径调度。但需结构化解析 URL：
- 从
location.search提取键值对（如?page=2&sort=name→{ page: '2', sort: 'name' }） - 从
location.hash提取片段（如#section-1） - 把完整上下文对象传给 handler，由业务决定如何更新视图（innerHTML / createElement / 框架组件挂载等）
不复杂但容易忽略细节：要处理 trailing slash 一致性、大小写敏感选项、404 fallback 路由、以及多次调用 start() 的幂等性。核心是把“URL 字符串 → 结构化路由数据 → 可控执行流”这一链路封装干净。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
