Vue keep-alive实践总结
2019-08-08

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

经过我这次的项目实践,总结出了keep-alive的页面是一直都会缓存起来的,直到你重新数据渲染之后去改变缓存的状态。

在看文章的时候可以到官网了解一下keep-alive额

情况一:只有从详情页跳转到列表页是,列表页是上一次缓存下来的;其页面跳转到列表页,列表页重新获取数据渲染(初始化)

在App.vue中(所有这个reportingRecord.vue页面已经是会缓存起来了

<keep-alive :include="["reportingRecord"]"> <router-view></router-view></keep-alive>

在配置路由参数

  { path: "/reportingRecord", name: "reportingRecord", meta: { keepAlive: true, //用于控制是否初始化页面,true:初始化页面,false:使用缓存页面

     }, component: reportingRecord   },

在reportingRecord.vue(列表页)

  activated(){ if(this.$route.meta.keepAlive){ this.reportingRecord();//当时true的时候,初始化数据 } }, beforeRouteLeave(to, from, next) { // 离开路由之前取消本页面的缓存 if (to.path == "/reportingRecordInfo") { this.$route.meta.keepAlive = false; //当从reportingRecordInfo.vue页面跳转回来的时候,不要去执行初始化数据的this.reportingRecord()方法

     }else{         this.$route.meta.keepAlive = true;      }      next();   },

情况二:子路由之间的切换,和详情跳转到列表页时,列表页不初始化数据;其他页面跳转到列表页再进行初始化数据(原理,思路同上,建议看懂情况一先)

在App中

<keep-alive :include="["rechargeOrder"]"> <router-view></router-view></keep-alive>

在配置路由参数

  { path: "/rechargeOrder", name: "rechargeOrder", component: rechargeOrder, redirect: "/noPayPrice", children: [{ path: "/payPrice", name: "payPrice", component: payPrice }, { path: "/noPayPrice", name: "noPayPrice", component: noPayPrice } ] },

在vuex存储状态

在其中一个子路由页面

  computed:{ ...mapState(["keepAlive1","keepAlive2"]), }, activated() { console.log("stateka2", this.keepAlive1); if (this.keepAlive1) { this.noPayLists(); } }, beforeRouteLeave (to, from, next) { if (to.path != "/index") { this.cacheNoPay(false) console.log("1111",this.keepAlive1); }else{ this.cacheNoPay(true) this.cachePay(true) } next() },  methods:{      ...mapMutations(["cachePay","cacheNoPay"]),   }

 

另一个子路由页面同理

computed:{ ...mapState(["keepAlive1","keepAlive2"]), }, activated() { //初始化数据 // console.log("stateka1", this.keepAlive1); if (this.keepAlive2) { this.payLists(); } }, beforeRouteLeave (to, from, next) { if (to.path != "/index") { this.cachePay(false) }else{ this.cacheNoPay(true) this.cachePay(true) } next() },

  methods:{      ...mapMutations(["cachePay","cacheNoPay"]),   }

 

总之就是在keep-alive标签中加入你要缓存的页面name,然后控制一个参数判断是否需要重新初始化

 

, 1, 0, 9);