在JavaScript中，要手动实现一个轻量级的路由系统，需要包含哪些核心步骤与关键逻辑？请提供一段完整可运行的具体代码示例，并简要说明不同路由切换方式（如hash变化与history API）之间的差异。

回答思路

1. 【回答框架 1】实现hash路由的核心是监听window.onhashchange事件，维护一个路由表（如对象或Map），将hash字符串映射到对应的视图渲染函数。默认路由处理缺失匹配，切换时通过window.location.hash赋值或直接修改href触发更新。
2. 【回答框架 2】基本代码结构包括：路由表定义（键为路径，值为函数或组件）、setRoute方法（更新hash并触发渲染）、render方法根据当前hash执行对应回调并写入容器，同时需要try-catch防止回调异常影响路由切换。
3. 【回答框架 3】使用History API（pushState, replaceState）时，hashchange不触发，需监听popstate事件，并配合手动调用路由处理函数；由于页面不会自动刷新，需在每次导航后统一执行渲染。
4. 【回答框架 4】路由模式可配置：hash模式兼容性好，无需服务端配合；history模式URL更美观，但刷新时需要服务端回退到index页面，否则404。
5. 【回答框架 5】添加路由守卫或参数传递时，可扩展路由匹配逻辑（如正则或query解析），但核心实现仍以同步映射为主，性能瓶颈通常不在路由本身。
6. 【关键点 1】基于hashchange事件实现路由变更监听是基础方案。
7. 【关键点 2】路由表使用对象或Map存储路径与回调的映射。
8. 【关键点 3】切换视图时需同步更新容器内容，并处理默认路由。
9. 【关键点 4】History API模式下监听popstate替代hashchange，并考虑服务端配合。
10. 【关键点 5】避免直接拼接HTML字符串导致XSS，应使用转义或框架渲染。
11. 【易错点 1】混淆hashchange与popstate触发时机。
12. 【易错点 2】忽略默认路由导致无效路径空白。
13. 【易错点 3】滥用history模式导致刷新404也未提供降级方案。