根本原因是模板未被JS注册到路由系统，导致router无法将路径映射到对应DOM；典型表现为URL变化但内容空白、刷新404、querySelector查不到节点。
为什么路由跳转后页面可访问性丢失
根本原因不是 HTML 模板“缺失”，而是你把模板当成了静态资源去加载，却没在 JS 中注册它——router 根本不知道 /about 对应哪段 DOM 或哪份 HTML 片段。
典型表现：点击链接 URL 变了，但内容区域空白；刷新页面直接 404；用 document.querySelector('#about') 查不到节点；控制台无报错，只有静默失败。
- 你写了
<template id="about"><h1>关于我们</h1></template>，但没在路由配置里告诉 JS “这个 template 就是 /about 的视图” - 你用了
fetch('/about.html')，但服务器没返回该文件（路径错、没构建、没部署），或返回了 404 而 JS 没做错误处理 - 你用 EJS 预编译了多个
_about.ejs片段，但没在初始 HTML 中通过<div id="views-about" hidden></div>挂载出来，JS 查不到它
如何让 template 或片段真正被路由识别
关键不是“有没有模板”，而是“JS 能不能按需取到它”。两种主流方式对应不同加载时机和可靠性：
-
内联 template 方式：所有
<template>必须在index.html初始加载时就存在，且 ID 唯一。路由匹配后，用document.querySelector('#about')取出，再layout.append(template.content.cloneNode(true))插入（注意用.content和.cloneNode()，否则移走原节点） -
fetch HTML 片段方式：必须确保
fetch('/about.html')请求能成功返回纯 HTML 字符串（不含<html><body>外层），且响应头为Content-Type: text/html；建议加catch处理网络失败，并 fallback 到 loading 状态或错误提示
不要混用：比如在 template 已存在的情况下还去 fetch 同名文件，既冗余又易冲突。
立即学习“前端免费学习笔记（深入）”；
SPA 中 HTML 模板的存放位置与路径陷阱
路径错误是导致“模板找不到”的最常见原因，尤其在构建后路径结构变化时：
- 开发时
fetch('/about.html')能通，是因为 dev server 自动映射根路径；构建后若部署在子目录（如https://example.com/myapp/），必须改写为fetch('./about.html')或拼接location.origin + '/myapp/about.html' - Webpack/Vite 构建会把
about.html当作静态资源输出到dist/目录下，但默认不处理.html后缀的资源——需显式配置copy插件或改用.txt后缀绕过限制 - EJS 模板若未被
include进主 HTML，或未设hidden属性，会被浏览器解析并渲染到可视区域，破坏 SPA 的单入口结构
可访问性丢失常被忽略的 DOM 状态残留问题
即使模板加载成功，可访问性仍可能中断——因为旧视图的焦点、滚动位置、ARIA 状态没清理：
- 切换前调用
document.activeElement?.blur()，避免新视图中表单元素无法获得焦点 - 对主容器（如
#app）执行scrollTo(0, 0)，否则用户可能卡在上一页底部 - 若使用
aria-live区域播报导航成功，需在每次视图替换后重置其textContent，否则连续跳转时语音朗读会堆积 - 不要只靠
innerHTML = ''清空容器——它会销毁事件监听器和绑定状态；用replaceChildren()或手动removeChild()更可控
可访问性不是加个 role="main" 就完事，它是路由切换时 DOM 生命周期的一部分，漏掉任何一环都可能导致屏幕阅读器失焦或键盘导航中断。
