嵌套路由中CSS样式无法加载问题咨询

云上老周

2026-5-25

解决嵌套路由下样式无法加载的问题

兄弟，我一眼就看出问题出在哪了——你样式用的是相对路径，嵌套路由下浏览器找错文件位置啦！

问题根源

当访问根路由/或者/abc这类一级路由时，浏览器会默认在当前路径（网站根目录）下查找style.css，这时候路径是对的；但访问/other/abc这种嵌套路由时，浏览器会把当前路径识别为/other/，所以会去请求/other/style.css，而你的样式文件根本不在这个子目录里，自然加载失败。

几种靠谱的解决方案

直接改用绝对路径（最推荐）
把样式链接里的相对路径改成以/开头的绝对路径，这样不管在哪个路由下，浏览器都会从网站根目录去请求样式文件：
```
<link rel="stylesheet" href="/style.css">
```
规范配置Express静态文件目录
如果你用的是Express框架，先确保已经配置了静态文件服务（把静态资源统一放在public文件夹里）：
```
// 在你的Express入口文件里添加
app.use(express.static('public'));
```
然后把style.css放到public文件夹中，同时保持样式链接为绝对路径/style.css，这是后端服务处理静态资源的标准做法。
模板引擎全局变量辅助（可选）
如果你用了EJS、Pug这类模板引擎，可以设置一个全局的基础路径变量，比如在Express里：
```
app.locals.baseUrl = '/';
```
然后在布局模板里引用：
```
<link rel="stylesheet" href="<%= baseUrl %>style.css">
```
不过这个方法不如直接用绝对路径来得简单直接。