URL携带ID时CSS失效，求解决方案：保留ID并正常加载CSS

问题出在哪 #

当你访问/details/123这类带ID的路径时，浏览器会把当前页面的相对路径基准定为/details/，而不是网站根目录。原来的CSS引用写的是./{{style}}.css，浏览器就会去/details/details.css找文件，但你的CSS根本不在这个位置，自然加载失败。

直接改路径就行 #

把CSS和JS的引用路径改成根相对路径——也就是把开头的./换成/，这样不管当前页面在哪个层级，浏览器都会从网站根目录去查找资源。

修改后的主布局代码 #

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
    <title>My Awesome App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="stylesheet" type="text/css" href="/{{style}}.css" />
    <script type = "text/javascript" src="/server.js"></script>  
</head>

顺便优化一下页面链接 #

库存页面的链接也建议换成根相对路径，避免其他页面跳转时出现路径问题：

<a href="/details/{{ID}}" class="card__link">Details</a>

额外提示 #

如果你的CSS文件是放在子目录里（比如/css文件夹下），那就把路径写成/css/{{style}}.css，原理是一样的——从根目录开始定位资源，不受当前URL影响。

内容的提问来源于stack exchange，提问作者Titan1315