# 问题分析 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'; } } ```