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中管理。然后到页面的时候再实现赋值等方法。