Nuxtjs/Vuejs点击浏览器返回按钮回到表单页时已填数据丢失如何解决

Nuxt 默认路由跳转后原页面组件会被销毁，当用户点击返回按钮时，表单页面会重新渲染，data 中的 formData 会恢复初始值，因此之前输入的内容会丢失。你添加的 autocomplete="on" 是浏览器用于自动填充用户历史提交过的表单数据的属性，不会保存未提交的临时输入内容，因此不生效。

方案1：开启页面keep-alive缓存（最简单） #

直接配置表单页面为缓存状态，组件不会随路由跳转销毁，表单数据自然保留：

• 如果你使用Nuxt2，可在页面组件中添加配置：

export default {
  // 新增这行配置
  keepAlive: true,
  data () {
    return {
      formData: {
        optionsSelector: null
      }
    }
  },
  // 其余原有逻辑
}

• 如果你使用Nuxt3，可在页面顶层添加definePageMeta配置：

definePageMeta({
  keepalive: true
})

注意：该方案适合不需要每次进入页面都重置表单的场景，如果需要指定场景刷新表单，可在activated生命周期中手动处理重置逻辑。

方案2：使用sessionStorage存储临时表单数据（最通用） #

将表单数据临时存在会话存储中，页面加载时优先读取存储的内容，提交完成后清除存储即可，修改后的代码如下：

<template>
  <div id="eventForm" class="row" style="margin-top:1%">
    <form ref="testDataForm" class="form-horizontal" autocomplete="on" @submit.prevent="formSubmit">
      <input
        v-model="formData.eventCount"
        type="number"
        class="form-control"
        required
      >

      <b-form-select v-model="formData.optionsSelector" class="form-control">
        <b-form-select-option value="null" disabled selected>
          Choose
        </b-form-select-option>
        <b-form-select-option value="value1">
          Text1
        </b-form-select-option>
        <b-form-select-option value="value2">
          Text2
        </b-form-select-option>
      </b-form-select>
      <button type="submit" class="btn btn-success">
        Submit
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        eventCount: '',
        optionsSelector: null
      }
    }
  },
  created() {
    // 页面加载时读取存储的表单数据
    const savedForm = sessionStorage.getItem('test_form_data')
    if (savedForm) {
      this.formData = Object.assign({}, this.formData, JSON.parse(savedForm))
    }
    // 监听表单数据变化，实时存储
    this.$watch('formData', (newVal) => {
      sessionStorage.setItem('test_form_data', JSON.stringify(newVal))
    }, { deep: true })
  },
  methods: {
    formSubmit () {
      // 提交成功后清除存储的表单数据，避免下次进入页面还保留旧数据
      sessionStorage.removeItem('test_form_data')
      this.$router.push('/GenerateTestData')
    }
  }
}
</script>

说明：使用sessionStorage的好处是关闭浏览器后数据会自动清除，不会永久残留，如果你需要长期保存可替换为localStorage。

方案3：使用Pinia/Vuex全局状态存储 #

如果你的表单数据需要在多个页面共享，可将formData存储在全局状态管理中，页面加载时从全局状态取值，提交后清空对应状态即可，适合复杂度较高的项目。

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