自定义导航栏href路径路由异常：新页面重复点击链接报错

问题根源 #

你的导航栏用了相对路径，但不同页面所在的目录层级不一致：

• 从src/index.html点击About时，相对路径htmlPages/about.html会指向src/htmlPages/about.html，路径正确；
• 但从src/htmlPages/about.html再次点击About时，相对路径会基于当前页面所在的htmlPages目录，变成src/htmlPages/htmlPages/about.html——这个路径不存在，所以触发找不到资源的错误。

修复方法 #

把所有href改成根相对路径（以/开头，路径基于网站根目录，这里默认src是你的网站根目录），这样不管在哪个页面，链接都会直接指向根目录下的对应文件，不会出现路径偏差。

修改后的main.js代码：

//This is the main.js file
class Navigation extends HTMLElement {
    connectedCallback(){
        this.innerHTML = `
    <div class="menuContainer fadeInDown-animation">
        <div class="item"><a href="/index.html"><button class="btn">Home</button></a></div>
        <div class="item"><a href="/htmlPages/about.html"><button class="btn">About</button></a></div>
        <div class="item"><button class="btn">Skills</button></div>
        <div class="item"><a href="/htmlPages/contact.html"><button class="btn">Contact</button></a></div>
    </div> 
    `
    }
}

customElements.define('navigation-bar', Navigation);

额外说明 #

如果部署时网站根目录不是src（比如把src下的内容直接放到服务器根目录），只需要调整根相对路径的起始逻辑即可，核心是让所有链接的路径都基于统一的根目录，避免因页面层级不同导致的路径错误。

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