Nuxtjs/Vuejs 表单数据在导航到不同的路线并使用浏览器后退按钮返回上一个路线时丢失

Posted 2023-02-22

【中文标题】Nuxtjs/Vuejs 表单数据在导航到不同的路线并使用浏览器后退按钮返回上一个路线时丢失

【英文标题】：Nuxtjs/Vuejs Form data are lost on navigating to different route and coming back to previous route using browser back button

【发布时间】：2021-11-08 11:49:42

【问题描述】：

我正在开发一个Nuxtjs 应用程序，其中我有一个form，用户填写信息并提交表单。提交后用户被导航到不同的route。现在，如果用户点击back button of browser，则用户再次导航到form，但字段中的数据会重置。

我想确保当用户点击浏览器后退按钮时，用户填写的数据会被保留。我尝试搜索，发现我们需要使用autocomplete=on，我尝试过，但它不适合我。当用户导航回route时，有人可以帮助我如何保留用户提供的信息通知。

<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: 
        optionsSelector: null
      
    
  ,
  methods: 
    formSubmit () 
      this.$router.push('/GenerateTestData')
      // this.$router.push( path: '/GenerateTestData' )
    
  

</script>

<style>

</style>

【参考方案1】：

您需要以某种方式持久化您的数据。通过再次获取状态 (formData.optionsSelector) 或将其存储在 cookies/localStorage/else 中。

https://***.com/a/66872372/8816585

所以如果你想在回来时拥有它，你需要有一个状态的getter，而不是在组件被挂载时让它默认为null。

computed + Vuex 的组合也可能是这样。

【讨论】：

非常感谢您的回复。我已经开发了应用程序的许多组件，再次将它们更改为Vuex store 对我来说很难。我打算暂时使用keep-alive，如果将来事情不顺利，那么我将切换到Vuex。再次感谢。

【参考方案2】：

你应该使用“keep-alive”来保持渲染的元素。如果你使用的是 nuxt.js，在你的 default.vue 文件中添加这个： https://nuxtjs.org/docs/2.x/features/nuxt-components

<template>
    <v-app dark>
        <v-main>
            <v-container class="ma-0 pa-0" id="appContainer" fluid>
                <nuxt keep-alive/>
            </v-container>
        </v-main>
    </v-app>
</template>