哪种编码技术可实现不修改URL即可变更页面内容的效果？

可实现该需求的技术 #

这类不刷新页面、不修改URL更新内容的能力本质是前端动态修改DOM，几乎所有主流前端技术栈都支持，核心依赖浏览器原生JavaScript API，常见实现方案包括：

• 原生JavaScript：直接调用document相关DOM操作接口增删改页面节点，是所有上层框架的底层实现基础
• 前端框架：React、Vue、Angular、Svelte等都内置响应式更新能力，绑定的数据变化时会自动更新对应DOM节点，无需手动操作DOM
• 工具库：jQuery等封装了简化DOM操作的方法，也可快速实现局部内容更新

该能力仅和前端逻辑相关，和后端使用的开发语言无关，只要页面加载了对应的JS脚本即可实现。

侧边栏切换不修改URL的实现原理 #

你观察到的站点交互属于单页应用的典型局部更新模式，实现逻辑如下：

1. 页面首次加载时，会预加载所有侧边栏板块对应的内容资源（可以是完整DOM结构、内容数据或渲染模板），也可配置为点击时异步拉取对应内容
2. 每个侧边栏选项都绑定了点击事件监听，触发时会阻止浏览器默认的跳转刷新行为
3. 点击对应选项后，JS逻辑会从本地缓存或异步接口拉取对应内容，直接替换右侧内容区域的DOM节点，全程不会触发浏览器页面跳转，因此URL不会发生变化
4. 部分同类场景会修改URL中#后的hash部分实现前进后退导航，但hash内容不会发送到服务端，也不会触发全页刷新，仍然属于同一URL的局部更新。

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