单HTML多JS简历站：URL设置与刷新状态保留方案咨询

不需要改成多HTML文件架构，利用hash路由的特性就能解决这个问题，核心是在页面初始化（包括刷新）时自动读取当前URL的hash值，加载对应内容。具体实现步骤如下：

• 监听hash变化事件：添加hashchange事件监听，当URL的hash改变时自动触发对应内容加载；同时在页面首次加载时主动检查当前hash，执行对应逻辑。
• 统一内容加载逻辑：把各个内容加载函数（aboutMe()、education()等）和hash路径做映射，避免重复代码。

修改后的代码示例 #

导航部分（保留原有结构，移除冗余onclick）

<div class="sideNav">
    <a href="#/about-me/">About Me</a><br>
    <a href="#/education/">Education</a><br>
    <a href="#/projects/">Projects</a><br>
    <a href="#/contact/">Contact</a><br>
</div>

JavaScript逻辑部分

// 建立hash路径与加载函数的映射表
const routeMap = {
    '#/about-me/': aboutMe,
    '#/education/': education,
    '#/projects/': proj,
    '#/contact/': contact
};

// 路由处理核心函数
function handleRoute() {
    const currentHash = window.location.hash;
    // 匹配到对应hash则执行加载函数，否则默认加载About Me
    if (routeMap[currentHash]) {
        routeMap[currentHash]();
    } else {
        aboutMe();
        // 可选：将URL hash重置为默认路径
        window.location.hash = '#/about-me/';
    }
}

// 页面首次加载/刷新时执行路由处理
window.addEventListener('load', handleRoute);
// 监听hash变化，处理导航切换
window.addEventListener('hashchange', handleRoute);

额外优化建议 #

• 移除原有导航的onclick属性，避免hashchange事件和点击事件重复触发加载函数。
• 可以给hash路径添加正则匹配逻辑，兼容末尾带/或不带/的情况，提升路由鲁棒性。

这样修改后，无论是点击导航切换hash，还是刷新页面，都会自动根据当前URL的hash加载对应内容，完美保留页面状态。

内容的提问来源于stack exchange，提问作者user20717301