VUE 页面缓存方法

操作步骤：

1、在router中设置需要缓存的页面：keepAlive: true 需要缓存    keepAlive: false 不需要缓存

                {
                    path: '/Wjgl',
                    component: resolve => require(['../components/page/Wjgl/index.vue'], resolve),
                    meta: { title: '问卷管理',requireAuth:true,keepAlive: true}
                },
                {
                    path: '/Wjgl_wjtj',
                    component: resolve => require(['../components/page/Wjgl/wjtj.vue'], resolve),
                    meta: { title: '问卷统计',requireAuth:true,keepAlive: false}
                },

2、在home页面中设置页面展示

<div class="content">
  <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

3、在需要缓存的页面中添加

    beforeRouteLeave (to, from, next) { 
        from.meta.keepAlive  = false;  
        if (to.path == '/Wjgl_wjtj') {
            from.meta.keepAlive  = true;  
        }
        next();
    },

    activated() {
        if (!this.$route.meta.keepAlive) { //true执行
            // 如果keepAlive是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
            //清空表单 
            return
        }
        // 恢复成默认的false，避免keepAlive一直是true，导致下次无法获取数据
        this.$route.meta.keepAlive = false;
    },

4、在跳转到的页面中添加，比如：详情页面

    beforeRouteLeave (to, from, next) {
        to.meta.keepAlive  = false;
        // 判断是否原路径返回，true则 原页面还是缓存    false则原页面不缓存
        if (to.path == this.$route.query.code) {
            to.meta.keepAlive  = true;  
        }
        next();
    },