vue步骤型表单缓存上一步页面

在移动端开始时，在步骤型表单时比如A->B->C，我们经常需要缓存上一步的页面级数据。本文介绍通过路由元信息以及vue的keep-alive来实现。

{
      name: 'cwkjzdbgs_step1', //财务会计制度及核算软件备案报告书
      path: '/cwkjzdbgs_step1',
      component: resolve => require(['../views/cwkjzdbgs/cwkjzdbgs_step1.vue'], resolve),
      meta: {
        keepAlive: true //配置路由元信息

      }
    }

在App.vue中我们需要根据路由元信息来决定是否缓存组件

<template>
  <div id="app">
    <!--  <view-box ref="viewBox"> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

配置了keepAlive的路由vue会缓存该页面。但是，我们重新一次进入表单时，而不是上一步返回。此时我们需要重新加载数据。

 beforeRouteEnter(to, from, next) { //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
    to.meta['fromPath'] = from.path;
    if (from.path == '/index/ywbl' || from.path == '/index') {
      to.meta['needFresh'] = true;
    } else {
      to.meta['needFresh'] = false;
    }
    next();
  },
  activated() { //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
    if (this.$route.meta['needFresh']) {
      this.init();
    } 
  }

当然了还有其他方式，比如说我们可以把填写了的数据放入到vuex中管理。然后到页面的时候再实现赋值等方法。