调用window.location.reload后页面空白，表格切换功能异常求助

核心错误 #

你的代码里window.location.reload()执行在DOM修改之前，页面会直接刷新，后面的tabPrincipal.style.display="none"和tabHistorico.style.display="block"根本不会被执行。而且刷新后页面回到初始状态，后端依然默认渲染vistorias数组对应的tabPrincipal，但你想要切换到historico数组的表格，却没有传递状态标记让后端知晓该加载哪组数据，最终导致页面空白。

解决思路 #

要实现“刷新页面并切换表格”的需求，需要在刷新前传递状态标记，让后端明确要渲染哪个数组的表格，同时前端根据这个标记控制表格显示。推荐使用URL参数（更适配后端渲染的场景）。

具体实现 #

1. 修改按钮点击函数，通过URL参数传递视图类型：

function showHistorico(){
  // 给当前URL添加view参数，标记要显示历史表格
  const currentUrl = window.location.pathname;
  window.location.href = `${currentUrl}?view=historico`;
}

2. 后端逻辑调整：
   读取URL中的view参数，若值为historico，则渲染historico数组到tabHistorico；否则默认渲染vistorias数组到tabPrincipal。

3. 前端页面加载时，根据URL参数控制表格显示：

window.addEventListener('load', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const viewType = urlParams.get('view');
  const tabPrincipal = document.getElementById('tabPrincipal');
  const tabHistorico = document.getElementById('tabHistorico');

  if (viewType === 'historico') {
    tabPrincipal.style.display = 'none';
    tabHistorico.style.display = 'block';
  } else {
    tabPrincipal.style.display = 'block';
    tabHistorico.style.display = 'none';
  }
});

备选方案（前端状态存储） #

如果不需要后端重新渲染，仅通过前端状态控制显示（但你提到必须刷新页面，此场景仅作补充），可以用localStorage存储状态：

function showHistorico(){
  localStorage.setItem('activeTable', 'historico');
  window.location.reload();
}

// 页面加载时读取状态
window.addEventListener('load', function() {
  const activeTable = localStorage.getItem('activeTable') || 'principal';
  const tabPrincipal = document.getElementById('tabPrincipal');
  const tabHistorico = document.getElementById('tabHistorico');

  if (activeTable === 'historico') {
    tabPrincipal.style.display = 'none';
    tabHistorico.style.display = 'block';
  } else {
    tabPrincipal.style.display = 'block';
    tabHistorico.style.display = 'none';
    localStorage.removeItem('activeTable');
  }
});

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