Web导航栏重定向路径叠加是开发中常见的路径解析问题，当页面嵌套层级较深时，使用相对路径的导航链接会出现路径重复拼接的情况，导致页面404或者跳转异常。根相对路径可以从网站根目录开始定位资源，从根源上避免路径叠加的问题。
路径叠加问题的产生原因
当导航栏的链接使用相对路径时，浏览器会以当前页面的URL作为基准来解析链接地址。如果当前页面处于子目录中，多次点击导航链接就会导致路径不断拼接。比如当前页面地址是http://ipipp.com/admin/user/list，导航链接写的是user/detail，点击后就会跳转到http://ipipp.com/admin/user/user/detail，出现路径叠加。
根相对路径的核心概念
根相对路径是以网站根目录为起点的路径，写法上以/开头，这个斜杠代表网站的根目录。无论当前页面处于哪个层级的子目录，根相对路径都会从根目录开始解析，不会受到当前页面路径的影响。比如根相对路径/admin/user/detail，不管当前页面是http://ipipp.com/还是http://ipipp.com/admin/，都会解析为http://ipipp.com/admin/user/detail。
根相对路径的使用方法
HTML导航栏配置
在HTML的导航栏链接中，直接把原来的相对路径替换为根相对路径即可。原来的相对路径写法：
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="admin/user/list.html">用户列表</a></li>
<li><a href="admin/article/list.html">文章列表</a></li>
</ul>
</nav>
替换为根相对路径后的写法：
<nav>
<ul>
<li><a href="/index.html">首页</a></li>
<li><a href="/admin/user/list.html">用户列表</a></li>
<li><a href="/admin/article/list.html">文章列表</a></li>
</ul>
</nav>
动态生成的导航链接处理
如果是通过后端模板或者前端框架动态生成导航链接，也需要拼接根相对路径。以PHP模板为例：
<?php
// 定义网站根路径常量
define('ROOT_PATH', '/');
$navList = [
['name' => '首页', 'url' => 'index.html'],
['name' => '用户列表', 'url' => 'admin/user/list.html'],
['name' => '文章列表', 'url' => 'admin/article/list.html']
];
?>
<nav>
<ul>
<?php foreach ($navList as $nav): ?>
<li>
<a href="<?php echo ROOT_PATH . $nav['url']; ?>">
<?php echo $nav['name']; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
如果是Vue框架的前端项目，可以在路由配置中使用根相对路径：
// 路由配置
const routes = [
{
path: '/',
name: 'Home',
component: () => import('/views/Home.vue')
},
{
path: '/admin/user/list',
name: 'UserList',
component: () => import('/views/admin/user/List.vue')
},
{
path: '/admin/article/list',
name: 'ArticleList',
component: () => import('/views/admin/article/List.vue')
}
]
注意事项
- 根相对路径的斜杠
/不能省略，否则会被解析为相对路径。 - 如果网站部署在子目录中，比如部署在
http://ipipp.com/website/，那么根相对路径的/会指向http://ipipp.com/，此时需要把根路径调整为/website/，可以在项目中定义全局的根路径变量来统一维护。 - 静态资源比如CSS、JS、图片的引用也可以使用根相对路径，避免同样出现路径解析错误的问题。
验证方法
修改完成后，可以逐层访问页面，点击导航栏的每个链接，查看浏览器地址栏的URL是否正确，是否出现路径重复拼接的情况。也可以在开发者工具的Network面板中查看请求的URL是否符合预期，确保没有404错误。