Flutter Web中GoRouter使用浏览器返回键后extra为null的问题求解

针对路由跳转后返回时extra参数丢失的问题，以下是几种无需暴露敏感数据在URL里的可行方案：

• 全局状态管理存储
  把需要传递的敏感参数存入全局状态容器（比如Vue的Pinia/Vuex、React的Zustand/Redux）。跳转至页面B时，同步将extra参数写入状态；页面B初始化时，直接从全局状态读取参数，而非依赖路由的extra字段。这种方式下，即使返回页面B，只要状态未被清除，就能稳定获取参数，完全避开路由参数丢失的问题。

• 会话存储（sessionStorage）临时存储
  跳转至页面B前，将extra参数序列化为JSON字符串存入sessionStorage：

  sessionStorage.setItem('pageBExtra', JSON.stringify(yourExtraData));
  context.push('/pageB');
  

  页面B加载时，从sessionStorage读取并反序列化参数：

  const extra = JSON.parse(sessionStorage.getItem('pageBExtra'));
  // 页面卸载时可清除该存储，避免残留
  onUnmounted(() => {
    sessionStorage.removeItem('pageBExtra');
  });
  

  会话存储仅在当前浏览器标签页有效，关闭后自动清除，既不会暴露在URL，也能保证返回页面B时参数存在。

• 利用浏览器history.state传递
  部分路由库支持在跳转时自定义history.state，将参数存入浏览器历史记录的状态中：

  context.push({
    path: '/pageB',
    state: { extra: yourExtraData }
  });
  

  页面B中直接从window.history.state读取参数：

  const extra = window.history.state?.extra;
  

  浏览器返回时，历史记录的状态会被保留，因此能正常获取到参数，无需依赖路由的extra字段。

• 组件缓存（针对Vue/React等框架）
  如果页面B无需每次进入都重新渲染，可通过框架的组件缓存机制保留状态。比如Vue中给页面B的路由配置添加meta: { keepAlive: true }，并在根组件用<keep-alive>包裹路由视图：

  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />
  

  缓存后的页面B在返回时不会重新初始化，之前接收的extra参数会被保留，但此方案仅适用于不需要刷新页面数据的场景。

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