Flutter中使用GoRouter切换底部导航栏时如何重新调用initialState？

以下是几种常见原因及对应的处理方案：

• 组件缓存/复用导致API未触发
  多数前端框架（React、Vue等）会对标签页对应的页面组件做缓存，返回首页时组件并未重新挂载，因此不会执行挂载阶段的API调用逻辑。
  解决：

  • 利用框架的页面激活钩子：Vue中使用activated生命周期钩子，React中通过useEffect监听路由切换或页面激活状态，在钩子内重新调用API。
  • 给路由组件绑定唯一key（比如结合当前路由+时间戳），强制组件每次进入都重新渲染。

• 路由配置的复用策略
  Vue Router、React Router等路由库默认会复用同一路由的组件，不会重复执行初始化代码。
  解决：

  • 修改路由配置，关闭组件复用；比如Vue Router中给路由添加props: route => ({ key: Date.now() })，确保每次进入都生成新组件实例。
  • 监听路由的beforeEnter守卫，在进入首页路由时主动调用API。

• 利用页面可见性API触发刷新
  通过浏览器的Page Visibility API监听页面状态，当首页标签从后台切换到前台时，重新拉取数据：

  // 全局或首页组件内添加监听
  function setupHomeRefresh() {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible' && window.location.pathname === '/home') {
        fetchHomeApi(); // 替换为你的首页API调用方法
      }
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
    // 记得组件销毁时移除监听
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }
  

• 状态管理的缓存机制
  若使用Vuex、Redux等状态管理工具，首页数据被持久化在状态中，组件挂载时直接读取缓存而非调用API。
  解决：

  • 在返回首页时，手动触发状态更新，调用API并覆盖缓存数据。
  • 给状态中的首页数据添加过期时间，每次组件激活时检查数据是否过期，过期则重新调用API。

内容的提问来源于stack exchange，提问作者Văn Thuận Lệ