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