vue 从指定页面进入到form表单页面时用户填写数据缓存

需求描述：

有一个巨长的form表单A页面（大概有287项这么多）用户填写完毕，核验通过会跳转进入下一B页面。用户进入B页面会发现之前填写的信息有误，想回退A页面进行修改，然后A页面信息没有保存，需要重新填写287项内容（此处手动狗头吐血）。

需求分析：

1.页面数据缓存 keepAlive

2.指定页面B页面进入A页面才进行数据缓存 路由守卫

3.非指定页面数据要进行重置

代码实现

//公共路由入口设置 一般为app.vue页面
<keep-alive>
     <router-view v-if="$route.meta.keepAlive" class="router-view">
     </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" class="router-view"></router-view>


//A页面路由配置 keepAlive为true即为需要缓存的组件 设置isBack属性，用来标示页面是否是从B页面返回的。
{
 name: '首页',
 path: 'index',
 component: Index,
 meta: {
   keepAlive: true, 
   isBack: false
 }
},
复制代码

2.指定页面进入A页面才进行数据缓存 路由守卫

  beforeRouteEnter(to, from, next) {
    if (from.path == "/detail") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
  },
复制代码

3.非指定页面数据要进行重置

//因我的项目中data中有用到全局变量需把this传入初始化data
Object.assign(this.$data, this.$options.data.call(this))
//如果没有使用this可不传
Object.assign(this.$data, this.$options.data())
//某单一标量重置
this.search = Object.assign({}, this.$options.data().search);
复制代码