Web Component中点击链接跳转后无法保留高亮状态的问题

哥们，我看了你的问题，核心原因其实很清晰：点击链接跳转页面后，整个页面会重新加载，你的Web Component也会被重新初始化——之前通过点击事件添加的special类会随着旧DOM的销毁而消失，重新渲染的组件是全新的，自然没有高亮状态。

先提个小细节：你代码里给多个链接用了同一个id="testId"，这不符合HTML规范（id必须是唯一的），建议改成class="test-link"，后续选择元素也用class来选，避免潜在的问题。

要实现「跳转页面+保留对应链接高亮」的效果，关键是让Web Component在每次页面加载完成后，能自动识别当前页面对应的是哪个链接，然后主动给它加上高亮类。最可靠的方式是通过当前页面的URL来匹配链接的路径，具体方案如下：

修改后的完整代码 #

class Webtest extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.attachShadow({mode: 'open'});
        this.shadowRoot.innerHTML = `
            <style>
                .special {
                    color: green; /* Active link styling */
                    font-weight: bold;
                }
            </style>

            <a class="test-link" href="/mypath/index.html">textA</a>
            <a class="test-link" href="/mypath/subfolderA/subfolderA.html">textB</a>
            <a class="test-link" href="/mypath/subfolderB/subfolderB.html">textC</a>
            <a class="test-link" href="/mypath/subfolderC/subfolderC.html">textD</a>
        `;

        const links = this.shadowRoot.querySelectorAll(".test-link");
        const currentPath = window.location.pathname;

        // 页面加载时，自动匹配当前URL对应的链接并高亮
        links.forEach(link => {
            // 用link.pathname和当前路径精准匹配，避免URL其他部分干扰
            if (link.pathname === currentPath) {
                link.classList.add('special');
            }
        });

        // 保留点击事件，给用户即时的高亮反馈（虽然会马上跳转，但体验更好）
        links.forEach(link => {
            link.addEventListener('click', () => {
                // 先移除所有链接的高亮
                this.shadowRoot.querySelectorAll('.special').forEach(el => el.classList.remove('special'));
                // 给当前点击的链接加高亮
                link.classList.add('special');
            });
        });
    }
}
customElements.define('webtest-component', Webtest);

方案说明 #

1. 修正重复id问题：把所有链接的id="testId"改成class="test-link"，符合HTML标准，也方便批量选择元素。
2. 页面加载时自动匹配高亮：通过window.location.pathname获取当前页面的路径，遍历所有链接，用link.pathname === currentPath精准匹配对应的链接，给它加上special类。这种方式最可靠，哪怕用户直接输入URL访问页面，也能正确高亮对应链接。
3. 保留点击事件的即时反馈：点击链接时先移除所有高亮，再给当前点击的链接加高亮，用户能看到瞬间的视觉反馈，提升体验。

如果你的链接URL带有查询参数（比如?id=1），这个方案依然有效，因为pathname只取URL的路径部分，不会受参数影响。

另外，也可以用sessionStorage存储点击的链接标识，但这种方式有局限性：如果用户直接输入URL访问，sessionStorage里没有记录就无法高亮，所以URL匹配的方式是最优解。

备注：内容来源于stack exchange，提问作者J C