JeecgBoot项目中TAB页切换导致查询条件丢失的解决方案

问题现象分析

在JeecgBoot v3.7.1版本中，用户反馈了一个关于TAB页切换时页面状态保持的问题。具体表现为：

1. 用户管理和角色管理页面在查询后切换TAB页，再返回时能够保持查询条件
2. 数据字典和职务管理页面在同样操作后，页面会刷新且查询条件丢失
3. 通过Online表单开发的新页面也存在同样的问题

这种现象实际上是由于Vue路由缓存机制未正确配置导致的。在Vue.js的单页应用架构中，默认情况下组件在路由切换时会销毁重建，因此无法保持之前的状态。

解决方案

路由缓存配置原理

JeecgBoot基于Vue.js框架开发，提供了路由缓存功能来保持页面状态。当启用路由缓存后，组件实例会被保留在内存中，而不是在离开时销毁，这样再次访问时就能保持之前的状态。

具体实现步骤

1. 修改路由配置： 在项目的路由配置文件中，为需要缓存的路由添加keepAlive: true属性。例如：

{
  path: '/system/dict',
  name: 'system-dict',
  component: () => import('@/views/system/DictList'),
  meta: {
    title: '数据字典',
    keepAlive: true
  }
}

2. Online表单生成的页面： 对于通过Online表单开发生成的页面，需要在生成代码后手动添加路由缓存配置。找到对应的路由文件（通常在src/router/modules目录下），添加上述keepAlive属性。

3. 组件适配： 确保页面组件能够正确处理activated和deactivated生命周期钩子。这些钩子会在组件被缓存和激活时触发，可以在这里处理特定的状态恢复逻辑。

注意事项

1. 内存占用： 启用路由缓存会增加内存使用量，特别是对于数据量大的页面。建议只对确实需要保持状态的页面启用缓存。

2. 数据更新： 对于需要实时更新的数据，可以在activated钩子中添加数据刷新逻辑，确保返回页面时显示最新数据。

3. 表单重置： 如果某些场景下确实需要重置表单，可以在路由的beforeRouteLeave钩子中清除缓存或重置状态。

最佳实践

1. 对于查询条件复杂的列表页，建议启用路由缓存
2. 对于简单的表单页面，可以不启用缓存
3. 对于数据实时性要求高的页面，可以在缓存的同时添加定时刷新或手动刷新按钮
4. 定期检查缓存页面的内存使用情况，避免内存泄漏

通过合理配置路由缓存，可以显著提升JeecgBoot应用的用户体验，特别是在频繁切换TAB页的操作场景下。