html本身不支持组件级路由控制，因其无运行时能力、无路由概念、无法动态挂载组件；实际依赖前端框架（如react/vue）或原生history api（pushstate+popstate）配合js手动管理url与dom替换，html仅作静态容器。
HTML 本身不支持组件级路由控制
直接说结论：纯 HTML 没有路由能力，更不存在“组件级别”的路由控制逻辑。所谓“HTML 实现”，实际是借力前端框架（如 React、Vue）或原生 history.pushState + popstate 手动管理 URL 和 DOM 替换，HTML 只负责承载最终渲染结果。
如果你在写单页应用（SPA），却试图用 <a href="/user"></a> 或 <iframe></iframe> 模拟组件切换，大概率会遇到页面刷新、状态丢失、SEO 不友好、前进后退失效等问题。
用 history.pushState + popstate 手动模拟路由
这是最轻量、不依赖框架的实现方式，适合极简场景（比如几个静态视图切换）。核心是拦截链接点击、更新 URL、动态替换容器内容。
- 必须阻止
<a></a>默认跳转：event.preventDefault() - 调用
history.pushState({ path: '/user' }, '', '/user')修改地址栏但不刷新 - 监听
window.addEventListener('popstate', ...)处理浏览器前进/后退 - 路由匹配和组件挂载完全手动：根据
location.pathname切换 DOM 内容，或用import()动态加载模块 - 注意：服务端需配置 fallback —— 所有非静态资源请求都返回
index.html，否则刷新 404
为什么不能靠 <iframe></iframe> 实现“组件路由”
常见误区：用多个 <iframe src="user.html"></iframe> 切换视图。这看似隔离，实则带来一连串问题：
-
<iframe></iframe>间通信复杂，需postMessage，无法共享状态或响应式更新 - 每个 iframe 独立 JS 上下文，
localStorage、fetch凭证、history都不互通 - SEO 基本不可见，搜索引擎无法索引 iframe 内容
- 移动端手势（如滑动返回）失效，
iframe无法参与浏览器历史栈 - 性能开销大：重复加载 JS/CSS，内存占用高
真正可行的组件级路由依赖框架抽象
所谓“组件级别”，本质是将路由路径映射到函数组件或类组件，并由框架统一管理生命周期、嵌套、懒加载、守卫等。HTML 在其中只作为宿主容器（如 <div id="root"></div>）。
- React Router v6：用
<router></router>包裹，<route path="/user" element="{<UserComponent"></route>} /> - Vue Router：声明式
<router-view></router-view>，配合routes: [{ path: '/user', component: User }] - 关键点不在 HTML 标签，而在 JS 层如何把路径解析为组件实例，并控制其 mount/unmount
- 若强行绕过框架、仅靠 HTML+JS 模拟，很快会陷入手动管理 key、ref、props、副作用的泥潭
最容易被忽略的是路由守卫与异步加载的耦合——比如权限校验失败时跳转登录页，或组件代码分割后的 loading 状态处理。这些不是 HTML 能表达的，而是运行时逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
