NodeJS+原生JS构建SPA路由时DOM丢失问题求助

问题根源 #

你的问题出在showIn方法的DOM节点移动逻辑上：

1. 切换路由时，你把布局容器（#layout-users）内的节点直接追加到隐藏容器（#views-users）的根节点下，而非放回它们原本所属的视图节点（比如#view-users-search）。
2. 当再次切回原路由时，目标视图节点已经没有子节点了（第一次切换时被全部移走），此时layout.append(...view.childNodes)实际上没有添加任何内容，导致布局区域为空。

解决方案 #

修改showIn方法，改为移动整个视图节点而非子节点，这样能完整保留每个视图的DOM结构：

showIn: viewSelector => {
    const layout = document.querySelector('#layout-users');
    const viewsContainer = document.querySelector('#views-users');
    
    // 将布局中当前显示的视图移回隐藏容器
    if (layout.firstElementChild) {
        viewsContainer.appendChild(layout.firstElementChild);
    }
    
    // 将目标视图移到布局容器中展示
    const targetView = document.querySelector(viewSelector);
    layout.appendChild(targetView);
}

补充说明 #

• 这种方式不会丢失任何DOM节点，每个视图的结构始终保持完整。
• modelUsersSearch.init中的#table-users选择器依然有效，因为元素始终存在于DOM中，只是父节点发生了切换。
• 改用firstElementChild避免了childNodes带来的文本节点（如空格、换行）干扰，仅处理实际的元素节点。

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