vue页面利用keep-alive实现页面快速缓存

需求：vue切换页面时，保留原页面表单数据，实现快速缓存，便于下次利用

方法：基于vue的内置组件keep-alive

文档：https://cn.vuejs.org/v2/api/#keep-alive

官方说明：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

//基础示例

// app.vue
<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的组件 --> 
        <router-view v-if="$route.meta.isCache"></router-view>
     </keep-alive>
      <!-- 不需要缓存的组件 -->
     <router-view v-if="!$route.meta.isCache"></router-view>
</div>

// 配置路由
{
      path: '/addForm',
      name: 'addForm',
      component: addForm,
      meta: { isCache: true }     // 是否需要缓存的视图组件
},