多页应用通过超链接跳转实现页面切换，每次刷新页面；单页应用利用 javaScript 动态更新内容，支持无刷新切换。常见方法包括：原生js 控制显隐、URL hash 路由、html5 history API 及 前端 框架路由（如 react 的 react-router–dom、vue的 vue-router）。其中，hash 方式无需服务器配置，适合简单项目；History API 需服务器支持以避免 404；大型项目推荐使用框架路由，便于管理复杂逻辑。选择方案应根据项目规模与需求决定。
在 HTML 中实现页面切换，主要分为单页应用（SPA）和多页应用（MPA）两种模式。它们的切换方式不同，适用场景也不同。下面分别介绍常见实现方法。
多页应用：通过超链接跳转页面
多页应用使用多个独立的 HTML 文件，页面切换靠 <a> 标签跳转，每次切换都会重新加载页面。
示例：
假设有两个页面：index.html 和 about.html
<a href="about.html"> 前往关于页 </a>
立即学习 “ 前端免费学习笔记（深入）”；
点击链接后 浏览器 会加载新页面，整个页面刷新。这是最基础、最直接的方式，适合内容型网站，如博客、企业官网等。
单页应用：通过 javascript 动态切换视图
单页应用只有一个 HTML 主页面，通过 JavaScript 动态更新内容，实现无刷新切换，用户体验更流畅。
常见实现方式有以下几种：
1. 使用原生 JavaScript 控制显示隐藏
将多个“页面”写在一个 HTML 中，用 div 区分，通过 JS 切换显示哪个部分。
示例代码：
<div id=”page-home” class=”page”> 首页内容 </div>
<div id=”page-about” class=”page”> 关于页内容 </div>
<button onclick=”showPage(‘home’)”> 首页 </button>
<button onclick=”showPage(‘about’)”> 关于 </button>
<script>
function showPage(page) {
document.querySelectorAll(‘.page’).foreach(el => el.style.display = ‘none’);
document.getElementById(‘page-‘ + page).style.display = ‘block’;
}
// 初始化显示首页
showPage(‘home’);
</script>
2. 利用 URL hash 实现路由
通过改变 URL 中的 hash（#）来记录当前页面状态，监听 hashchange 事件 实现切换。
示例：
<a href=”#home”> 首页 </a> | <a href=”#about”> 关于 </a>
<script>
window.addEventListener(‘hashchange’, function() {
const page = window.location.hash.slice(1) || ‘home’;
showPage(page);
});
// 页面首次加载时触发一次
if (window.location.hash) {
window.dispatchEvent(new Event(‘hashchange’));
} </script>
这种方式无需服务器支持，适合简单项目或学习用途。
3. 使用现代 前端 框架（React/Vue 等）的路由系统
实际开发中，单页应用通常使用框架自带的路由机制：
- React 使用
react-router-dom，通过<BrowserRouter>和<Route>配置路径 - Vue 使用
vue-router，支持 history 模式和 hash 模式
这些框架能处理复杂的路由逻辑，如嵌套路由、懒加载、守卫等，适合大型项目。
4. html5 History API 实现无刷新跳转
使用 history.pushState() 和 popstate 事件，可以在不刷新页面的情况下修改 URL 并响应前进后退。
示例：
<a href=”#” onclick=”goTo(‘home’)”> 首页 </a>
<a href=”#” onclick=”goTo(‘about’)”> 关于 </a>
<script>
function goto(page) {
history.pushState({page}, ”, ‘/’ + page);
showPage(page);
}
window.onpopstate = function(event) {
if (event.state) {
showPage(event.state.page);
}
};
</script>
注意：使用 history 模式时，服务器需配置 fallback 到 index.html，否则刷新会 404。
基本上就这些。选择哪种方式取决于项目复杂度和需求。小项目可用 hash 或 JS 控制，大项目建议用框架路由。不复杂但容易忽略的是 URL 状态同步和 浏览器 前进后退的支持。
