Vue2中如何用keep-alive保留浏览器回退时的表单输入数据？

当你切换页面回退时，Vue组件默认会被销毁重建，导致输入数据丢失。keep-alive是Vue内置的组件，专门用来缓存组件实例，保留组件的状态数据。

场景1：基于Vue Router的页面切换（最常见） #

如果你的表单是一个路由页面组件，只需在路由出口用keep-alive包裹即可：

1. 根组件（App.vue）修改 #

<template>
  <div id="app">
    <!-- 包裹路由视图，缓存所有路由组件 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

如果只想缓存特定表单组件，使用include属性（需给组件设置name）：

<keep-alive include="FormPage">
  <router-view></router-view>
</keep-alive>

2. 表单组件（FormPage.vue）实现 #

<template>
  <form action='process.php' method="post" name="submit_form" id="submit_form" @submit="validateForm">
    <label for="username">Name</label>
    <input type="text" name="username" v-model="username" placeholder="Username"/>
    <br><br>
    <input class="submit_button" name="submit_form" type="submit" value="Submit">
  </form>
</template>

<script>
export default {
  name: 'FormPage', // 必须设置name，和include的值匹配
  data() {
    return {
      username: ''
    }
  },
  methods: {
    validateForm(e) {
      // 简单验证逻辑
      if (!this.username.trim()) {
        e.preventDefault()
        alert('请输入用户名')
      }
      // 提交成功后可手动清空数据
      // if (验证通过) this.username = ''
    }
  }
}
</script>

场景2：单页面内组件切换（无路由） #

如果只是在同一个Vue实例内切换显示表单和其他内容，用keep-alive包裹表单组件：

完整index.html示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="showForm = !showForm">切换页面</button>
    <!-- 用keep-alive包裹表单组件 -->
    <keep-alive>
      <form-component v-if="showForm"></form-component>
    </keep-alive>
    <div v-else>这是其他页面内容</div>
  </div>

  <script>
    // 注册表单组件
    Vue.component('form-component', {
      name: 'FormComponent',
      template: `
        <form action='process.php' method="post" name="submit_form" id="submit_form" @submit="validateForm">
          <label for="username">Name</label>
          <input type="text" name="username" v-model="username" placeholder="Username"/>
          <br><br>
          <input class="submit_button" name="submit_form" type="submit" value="Submit">
        </form>
      `,
      data() {
        return {
          username: ''
        }
      },
      methods: {
        validateForm(e) {
          if (!this.username.trim()) {
            e.preventDefault()
            alert('请输入用户名')
          }
        }
      }
    })

    // 初始化Vue实例
    new Vue({
      el: '#app',
      data: {
        showForm: true
      }
    })
  </script>
</body>
</html>

关键注意点 #

• keep-alive只会缓存组件的状态，不会阻止表单提交后的默认行为，验证逻辑仍需自己实现
• 如果需要在组件缓存激活/停用的时候做额外操作，可以使用activated和deactivated生命周期钩子
• 提交表单后若要清空输入，需手动重置data里的对应字段

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