多页应用通过超链接跳转实现页面切换,每次刷新页面;单页应用利用JavaScript动态更新内容,支持无刷新切换。常见方法包括:原生JS控制显隐、URL hash路由、HTML5 History API及前端框架路由(如React的react-router-dom、Vue的vue-router)。其中,hash方式无需服务器配置,适合简单项目;History API需服务器支持以避免404;大型项目推荐使用框架路由,便于管理复杂逻辑。选择方案应根据项目规模与需求决定。

在HTML中实现页面切换,主要分为单页应用(SPA)和多页应用(MPA)两种模式。它们的切换方式不同,适用场景也不同。下面分别介绍常见实现方法。
多页应用:通过超链接跳转页面
多页应用使用多个独立的HTML文件,页面切换靠 标签跳转,每次切换都会重新加载页面。
示例:假设有两个页面:index.html 和 about.html
立即学习“前端免费学习笔记(深入)”;
点击链接后浏览器会加载新页面,整个页面刷新。这是最基础、最直接的方式,适合内容型网站,如博客、企业官网等。
单页应用:通过JavaScript动态切换视图
单页应用只有一个HTML主页面,通过JavaScript动态更新内容,实现无刷新切换,用户体验更流畅。
常见实现方式有以下几种:
1. 使用原生JavaScript控制显示隐藏
将多个“页面”写在一个HTML中,用 div 区分,通过JS切换显示哪个部分。
本文档主要讲述的是Android使用ViewFlipper做页面切换;Android系统自带有一个多页面管理的控件:ViewFlipper.它可以简单实现子页面的切换,它只需使用addView方法添加几个View,每个View对应的是一个页面,即可完成对于多页面的管理。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看
2. 利用URL hash 实现路由
通过改变 URL 中的 hash(#)来记录当前页面状态,监听 hashchange 事件实现切换。
示例:这种方式无需服务器支持,适合简单项目或学习用途。
3. 使用现代前端框架(React/Vue 等)的路由系统
实际开发中,单页应用通常使用框架自带的路由机制:
-
React 使用
index.html,通过about.html和前往关于页配置路径 -
Vue 使用
react-router-dom,支持 history 模式和 hash 模式
这些框架能处理复杂的路由逻辑,如嵌套路由、懒加载、守卫等,适合大型项目。
4. HTML5 History API 实现无刷新跳转
使用 和 事件,可以在不刷新页面的情况下修改URL并响应前进后退。
注意:使用 history 模式时,服务器需配置 fallback 到 index.html,否则刷新会 404。
基本上就这些。选择哪种方式取决于项目复杂度和需求。小项目可用 hash 或 JS 控制,大项目建议用框架路由。不复杂但容易忽略的是 URL 状态同步和浏览器前进后退的支持。










