vue中keep-alive，include的缓存问题

2023-08-07 10:35:03 78

前提：有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面)，B是订单列表页，C是订单详情页，D是费用详情页

需求：顺序是A->B->C->D,每次都刷新页面，D->C->B时走缓存，但是每次从A到B都要刷新B页面，从B到C需要刷新C页面，从C到D要刷新D页面

在vue官方文档2.1以上有include和exclude属性允许组件有条件地缓存。在这里主要用include结合vuex来实现（四个页面组件都有自己的name才会生效，这里name就叫A,B,C,D）

从D->C，从C->B，从B->A可以写一个公共的头部返回组件，统一使用this.$router.go(-1)返回前一页

App.vue




exportdefault{
data(){
return{}
},
computed:{
keepAlive(){
returnthis.$store.getters.keepAlive
}
}
}

store.js

importVuefrom'vue'
importVuexfrom'vuex'

Vue.use(Vuex)

exportdefaultnewVuex.Store({
state:{
keepAlive:[]
},
mutations:{
SET_KEEP_ALIVE:(state,keepAlive)=>{
state.keepAlive=keepAlive
}
},
getters:{
keepAlive:state=>state.keepAlive
}
})

每次进入B页面时先初始化keepAlive(设置要走缓存的页面)

A.vue

B.vue该页面用来设置缓存和清除缓存

到这里就实现了需求

PS：vuekeep-aliveinclude无效

检查版本

确定当前的vue版本的是2.1+

因为include和exclude是vue2.1.0新增的两个属性.

package.json

"vue":"^2.5.2",

检查name

注意,不是router.js中的name,而是单个vue组件中的name属性.

建议将router.js中的name和vue组件的name保持一致,不要混乱.

exportdefault{
name:"index"
}

多层嵌套

网上的答案几乎都是检查vue组件的name属性,但还是有一个巨坑.

那就是多级嵌套,但凡有超过两个以上的router-view且是父子级关系,请都加上keep-alive,只加一个不会生效.

//app.vue




//other.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue中keep-alive，include的缓存问题

热门推荐

随机推荐