# 实现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直接访问特定页面
* 浏览器历史记录中会保存页面状态