动态路由下CSS无法按需加载表现为样式不更新或旧样式残留；需手动监听路由、构造路径、创建link注入，并清理旧样式，避免冲突与重复加载。
动态路由下CSS文件无法按需加载的常见表现
你改了路由，页面样式没变；或者切换页面时旧样式残留、新样式没生效——根本不是JS逻辑问题，而是CSS没跟着路由走。浏览器不会自动根据URL路径去加载对应CSS文件，link标签写死在HTML里就只加载一次，@import在CSS里也不能响应路由变化。
用import()配合document.createElement('link')手动注入CSS
现代前端框架（如React/Vue）的“动态导入”只管JS模块，CSS得自己动手挂载。核心思路是：监听路由变化 → 解析当前路径 → 构造CSS路径 → 创建link标签并插入head。
- 路径拼接要小心，避免重复加载：先查
document.querySelector("link[href*='page-a.css']")，存在就跳过 - 务必设置
link.rel = 'stylesheet'和link.onload回调，否则样式可能未就绪就渲染 - 不要用
fetch + insertAdjacentHTML，CSS文本插入会丢失@media、@keyframes等规则解析上下文 - 示例片段：
const loadCSS = (path) => { if (document.querySelector(`link[href="${path}"]`)) return; const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = path; document.head.appendChild(link); }; loadCSS('/css/pages/user-profile.css');
Webpack/Vite中import.meta.url与new URL()构造相对路径
硬编码绝对路径容易出错，尤其部署到子目录时。要用模块系统提供的运行时路径能力来生成正确URL。
- Vite项目优先用
new URL('./user.css', import.meta.url).href，它能正确处理别名和构建后哈希 - Webpack 5+支持
import.meta.webpackHot，但CSS路径推荐统一走new URL()，兼容性更好 - 别用
__dirname或process.cwd()，它们在浏览器环境无效，且与打包输出路径无关 - 错误示范：
import('./pages/user.css')—— 这是JS动态导入语法，不触发CSS加载
样式隔离失败：多个路由CSS同时生效的坑
手动注入不清理旧样式，就会出现A页的.btn覆盖B页的.btn，或者动画类名冲突导致闪烁。这不是“没加载”，而是“加太多”。
立即学习“前端免费学习笔记（深入）”；
- 每次加载新CSS前，先移除上一个路由对应的
link，可用data-route-id标记区分：document.querySelectorAll('link[data-route-id]').forEach(el => el.remove()); - 避免全局选择器泛滥，路由级CSS建议加命名空间，比如
.page-user .header而不是直接.header - 慎用
!important，它会让卸载后的样式仍残留优先级，调试时极难定位 - CSS-in-JS库（如Emotion）自带作用域，但若混用传统CSS文件，依然要手动管理
link生命周期
/user/123 → /user/456）是否触发样式重载。这种场景下不能只比对路径字符串，得提取路由模板（如/user/:id），再判断是否属于同一模块——否则每个ID都会加载一遍CSS，缓存失效，网络请求暴增。 
