VUE 页面缓存方法

落日映苍穹つ 2023-01-02 12:30 242阅读 0赞

# 操作步骤： #

### 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页面中设置页面展示 ###

### 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][https_blog.csdn.net_qq_42715494_article_details_113900248_spm_1001.2014.3001.5501] ###

[https_blog.csdn.net_qq_42715494_article_details_113900248_spm_1001.2014.3001.5501]: https://blog.csdn.net/qq_42715494/article/details/113900248?spm=1001.2014.3001.5501