dns-server/.trae/documents/实现hash路由功能，避免刷新时返回到主页.md

实现hash路由功能，避免刷新时返回到主页

问题分析

当前系统使用简单的页面切换逻辑，通过隐藏/显示不同的内容区域来实现页面切换。这种方式的缺点是：

1. 刷新页面后会返回到主页
2. 无法通过URL直接访问特定页面
3. 无法在浏览器历史记录中保存页面状态

解决方案

实现hash路由功能，将页面状态保存在URL的hash部分，例如：

• http://localhost:8080/#dashboard
• http://localhost:8080/#blacklists
• http://localhost:8080/#query
• http://localhost:8080/#config

实现步骤

1. 修改handlePageSwitch函数

• 在页面切换时，更新URL的hash
• 移除e.preventDefault()，允许默认的hash变化

2. 添加hashchange事件监听器

• 监听window的hashchange事件
• 在hash变化时，根据hash值显示相应的内容
• 更新页面标题和活动菜单项

3. 添加initHashRoute函数

• 在页面加载时调用
• 获取URL的hash值
• 如果没有hash值，默认设置为#dashboard
• 根据hash值显示相应的内容
• 更新页面标题和活动菜单项

4. 在页面加载时调用initHashRoute函数

• 确保在DOMContentLoaded事件中调用initHashRoute函数

预期效果

• 页面切换时，URL的hash会相应更新
• 刷新页面后，会显示与URL hash对应的页面
• 默认情况下，http://localhost:8080会显示dashboard内容，URL变为http://localhost:8080/#dashboard
• 可以通过URL直接访问特定页面
• 浏览器历史记录中会保存页面状态

技术要点

• 使用window.location.hash获取和设置URL的hash值
• 使用window.addEventListener('hashchange', ...)监听hash变化
• 使用window.addEventListener('DOMContentLoaded', ...)在页面加载时初始化
• 确保在页面加载时检查hash值，如果没有则设置为#dashboard

实现时间

• 预计30分钟完成所有修改和测试

风险评估

• 低风险：修改范围明确，不涉及核心功能
• 可回滚：所有修改均为前端修改，可通过恢复文件轻松回滚

依赖关系

• 依赖现有的页面切换逻辑
• 依赖现有的CSS类和HTML结构

测试策略

• 手动测试页面切换时URL hash的变化
• 测试刷新页面后是否显示正确的页面
• 测试直接访问带hash的URL是否显示正确的页面
• 测试默认情况下是否显示dashboard内容

验收标准

• 页面切换时，URL的hash会相应更新
• 刷新页面后，会显示与URL hash对应的页面
• 默认情况下，http://localhost:8080会显示dashboard内容，URL变为http://localhost:8080/#dashboard
• 可以通过URL直接访问特定页面
• 浏览器历史记录中会保存页面状态