如何向前一个屏幕传递数据及pop页面后的状态留存问题

1. POP页面是否会销毁所有初始化内容 #

POP操作的销毁逻辑没有统一标准，完全取决于当前使用的路由框架默认配置：

• 绝大多数移动端原生、跨端框架的路由栈（iOS UINavigationController、Android Fragment回退栈、Flutter Navigator、React Native Stack.Navigator默认配置）规则为：push新页面时仅将前一个页面压入栈底挂起，不会销毁；只有当前被操作的页面执行POP时，才会销毁当前页面，栈底的前一个页面会重新激活。你遇到的返回后变量无变更的问题，通常是前一个页面挂起期间没有监听数据变更通知、重新激活时未执行状态刷新逻辑导致。
• 多数Web前端路由框架（VueRouter、React Router默认hash/history模式）如果没有开启页面缓存配置，跳转新路由时前一个页面实例会直接销毁，POP返回时会重新初始化页面，此时原有变量状态会被重置。

2. 不跳转前提下向前一个页面传值的实现方案 #

完全可以实现，通用方案分为以下几类：

• 事件总线/订阅通知机制
  在公共作用域初始化全局事件管理器，前一个页面初始化时订阅对应数据更新事件，需要传值的页面在POP前后触发对应事件并携带参数即可，伪代码示例：

  // 前一个页面初始化阶段注册监听
  eventBus.on('updateFormData', (newData) => {
    this.formData = newData
    // 可补充页面UI刷新逻辑
  })
  
  // 当前需POP的页面触发事件传值
  eventBus.emit('updateFormData', {id: 1, content: '更新后的内容'})
  // 之后执行POP操作即可
  

• 全局状态管理
  若项目已接入状态管理工具（Redux、Vuex、Pinia、Provider、MobX等），直接将需共享的变量存入全局状态，前一个页面绑定对应状态的监听逻辑即可，全局状态更新后，前一个页面激活时会自动读取最新值。
• 路由回调传参
  大部分移动端路由框架支持push新页面时传入回调函数，新页面POP前执行回调即可将数据回传给前一个页面，伪代码示例：

  // 前一个页面push新页面时传入回调
  navigator.push('EditPage', {
    onSubmit: (newValue) => {
      this.targetVar = newValue
    }
  })
  
  // 新页面POP前调用回调传值
  this.route.params.onSubmit('修改后的值')
  navigator.pop()
  

• 路由栈实例直接访问
  部分框架支持直接获取路由栈中的前一个页面实例，可直接给实例变量赋值，比如Flutter可通过navigator!.previousRoute获取前一个路由实例，iOS可通过navigationController的viewControllers数组拿到前一个VC实例直接操作。

特殊场景说明 #

如果你的路由框架配置为跳转新页面时销毁前一个页面实例（比如未开启缓存的Web路由），则只有全局状态管理方案生效，因为前一个页面的实例、事件监听、回调都已被销毁，只能下次进入页面时从全局状态拉取最新值。

内容的提问来源于stack exchange，提问作者Samuella M. Aglago