VUE 页面缓存方法

操作步骤：

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

                {
                    path: '/Wjgl',
                    component: resolve => require(['../components/page/Wjgl/index.vue'], resolve),
                    meta: { title: '问卷管理',requireAuth:true,keepAlive: true,isBack: false}
                },
                {
                    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、在需要缓存的页面中添加，使用isBack来判断是否使用缓存

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

    activated() {
        if (!this.$route.meta.isBack) { //true执行
            // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据

            //清空表单 
            return
        }
        // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
        this.$route.meta.isBack= false;
    },

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

    beforeRouteLeave (to, from, next) {
        to.meta.isBack= false;

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

备注： 
        最重要的将原页面isBack设置为false
       操作方法参考 https://blog.csdn.net/qq_42715494/article/details/113900248?spm=1001.2014.3001.5501