Vue2项目浏览器返回后状态未保留问题求助

1. 持久化单选状态到本地存储 #

因为未使用路由，页面跳转后返回时，原页面的Vue实例状态会丢失（或从缓存恢复时状态未同步），可以用localStorage或sessionStorage保存选中值：

• 监听单选组的change事件，保存选中值：

  <a-radio-group v-model="radioValue" @change="saveRadioValue">
    <a-radio value="option1">选项1</a-radio>
    <a-radio value="option2">选项2</a-radio>
  </a-radio-group>
  

  methods: {
    saveRadioValue(value) {
      // 临时状态用sessionStorage，长期保存用localStorage
      sessionStorage.setItem('radioSelectedValue', value)
    }
  }
  

• 在组件的mounted钩子中恢复状态：

  mounted() {
    const savedValue = sessionStorage.getItem('radioSelectedValue')
    if (savedValue) {
      this.radioValue = savedValue
    }
  }
  

2. 监听pageshow事件处理浏览器缓存恢复 #

浏览器后退时可能会从BF Cache（后退缓存）恢复页面，此时created/mounted钩子不会触发，需要监听pageshow事件强制同步状态：

mounted() {
  window.addEventListener('pageshow', () => {
    const savedValue = sessionStorage.getItem('radioSelectedValue')
    if (savedValue) {
      this.radioValue = savedValue
      // 强制组件更新，确保单选按钮渲染正确
      this.$forceUpdate()
    }
  })
}

3. 检查单选组的响应式绑定是否正确 #

确保v-model绑定的是Vue响应式变量：

• 在组件data中声明响应式变量：

  data() {
    return {
      radioValue: 'option1' // 设置默认选中值
    }
  }
  

• 避免绑定非响应式的变量（比如直接绑定到未被Vue监听的对象属性）。

4. 禁用页面缓存（极端方案） #

如果上述方法无效，可以强制浏览器不缓存当前页面，后退时重新加载页面：
在页面的<head>中添加meta标签：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

此时页面后退会重新加载，mounted钩子会触发，再通过本地存储恢复状态即可。

内容的提问来源于stack exchange，提问作者Daniel Malmgren de Oliveira