95 lines
3.8 KiB
Markdown
95 lines
3.8 KiB
Markdown
# 问题分析
|
||
|
||
1. **问题现象**：当用户在某个设置项页面刷新时，页面会自动回到仪表盘页面。
|
||
|
||
2. **问题根源**：
|
||
- 在 `dashboard.js` 文件中，`handleHashChange` 函数被定义在 `handlePageSwitch` 函数内部
|
||
- 当页面刷新时，`handleHashChange` 函数会在页面加载完成后立即执行
|
||
- 此时，`menuItems` 可能还没有被正确初始化，或者 `handleHashChange` 函数内部的 `menuItems` 引用的是旧的变量，导致它无法找到对应的菜单项
|
||
- 当 `handleHashChange` 函数无法找到对应的菜单项时，它会执行 `window.location.hash = '#dashboard'`，将页面重定向到仪表盘页面
|
||
|
||
3. **具体问题**：
|
||
- `handleHashChange` 函数在找不到对应的菜单项时，会立即重定向到仪表盘页面，而不是先尝试直接显示对应的内容
|
||
- 这导致用户在刷新页面时，即使URL中包含正确的hash，页面也会被重定向到仪表盘
|
||
|
||
# 修复方案
|
||
|
||
1. **修复 `handleHashChange` 函数**：
|
||
- 修改 `handleHashChange` 函数，确保它在找不到对应的菜单项时，不会总是重定向到仪表盘页面
|
||
- 当无法找到对应的菜单项时，先尝试直接显示对应的内容
|
||
- 只有当对应的内容也不存在时，才重定向到仪表盘页面
|
||
|
||
2. **优化页面初始化流程**：
|
||
- 确保 `handleHashChange` 函数在页面完全加载后才执行
|
||
- 确保 `menuItems` 变量在 `handleHashChange` 函数执行前已经被正确初始化
|
||
|
||
# 实现步骤
|
||
|
||
1. 修改 `dashboard.js` 文件中的 `handleHashChange` 函数：
|
||
- 当无法找到对应的菜单项时，先尝试直接显示对应的内容
|
||
- 只有当对应的内容也不存在时，才重定向到仪表盘页面
|
||
|
||
2. 测试修复后的功能：
|
||
- 启动DNS服务器
|
||
- 访问Web界面，导航到某个设置项页面，例如 `#config`
|
||
- 刷新页面
|
||
- 验证页面是否仍然显示在设置项页面，而不是自动回到仪表盘页面
|
||
|
||
# 预期结果
|
||
|
||
- 用户在某个设置项页面刷新时，页面会保持在当前页面，不会自动回到仪表盘页面
|
||
- 只有当URL中的hash无效时，页面才会重定向到仪表盘页面
|
||
- 页面导航功能正常，用户可以通过点击菜单项切换页面
|
||
|
||
# 修复代码
|
||
|
||
```javascript
|
||
// 修改 dashboard.js 文件中的 handleHashChange 函数
|
||
function handleHashChange() {
|
||
let hash = window.location.hash;
|
||
|
||
// 如果没有hash，默认设置为#dashboard
|
||
if (!hash) {
|
||
hash = '#dashboard';
|
||
window.location.hash = hash;
|
||
return;
|
||
}
|
||
|
||
const targetId = hash.substring(1);
|
||
|
||
// 查找对应的内容元素
|
||
const contentElement = document.getElementById(`${targetId}-content`);
|
||
|
||
// 如果找到了对应的内容元素，直接显示
|
||
if (contentElement) {
|
||
// 隐藏所有内容
|
||
document.querySelectorAll('[id$="-content"]').forEach(content => {
|
||
content.classList.add('hidden');
|
||
});
|
||
|
||
// 显示目标内容
|
||
contentElement.classList.remove('hidden');
|
||
|
||
// 查找对应的菜单项并更新活动状态
|
||
let targetMenuItem = null;
|
||
menuItems.forEach(item => {
|
||
if (item.getAttribute('href') === hash) {
|
||
targetMenuItem = item;
|
||
}
|
||
});
|
||
|
||
// 更新活动菜单项
|
||
menuItems.forEach(item => {
|
||
item.classList.remove('sidebar-item-active');
|
||
if (item.getAttribute('href') === hash) {
|
||
item.classList.add('sidebar-item-active');
|
||
// 更新页面标题
|
||
document.getElementById('page-title').textContent = item.querySelector('span').textContent;
|
||
}
|
||
});
|
||
} else {
|
||
// 如果没有找到对应的内容，默认显示dashboard
|
||
window.location.hash = '#dashboard';
|
||
}
|
||
}
|
||
``` |