VUE 页面缓存方法 落日映苍穹つ 2023-01-02 12:30 185阅读 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页面中设置页面展示 ### <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][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
还没有评论,来说两句吧...