因为项目Vue router 连续嵌套了好几层 首先检查keep-alive的 include 和including 属性是否应用正确
include 是缓存包含 including是缓存相反
项目中嵌套了好几层keep-alive 那个页面需要缓存 应当给当前页面 父级最近的router 外面加keep-alive 而不是APP.vue 的最外层
因为所做的项目中有很多 分页页面 分页内容中还有 查看详情页面 那么点击查看详情后 跳入详情 在返回 当前 分页页面的缓存就应当 保留
我的方案如下
//分页父级的router $store.state.keepAlive 是vuex全局变量用于储存
<template>
<keep-alive :include="$store.state.keepAlive">
<router-view/>
</keep-alive>
</template>
//点击查看详情
click(str){
//储存需要缓存的页面name
store.state.keepAlive=[this.$options.name];
setTimeout(()=>{
this.$router.push('')
},0)
},
最后 根据自己的需要 在指定场景清除 store.state.keepAlive