keep-alive多级页面缓存实现

keep-alive多级页面缓存实现

只适用于页面是否缓存状态不变的情况

网上有一种很普遍的教程，不使用keep-alive的include属性，而是通过在路由表中添加meta: { keepAlive: true}，通过v-if判断是否使用keep-alive

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

这种写法只适用于页面是否缓存的状态不变的情况

现实中遇到的场景是，有三个页面（总览页、列表页、详情页），三个页面逐级跳转（总览页 -> 列表页 -> 详情页）。因为列表页是分页懒加载的，用户希望可以从详情页返回时可以直接定位到之前的位置

因此要实现的实际上为页面缓存+记录滚动条位置，这里先看页面缓存

网上很多教程的写法是，在列表页使用beforeRouteLeave，动态设置keepAlive的值

// 列表页
beforeRouteLeave(to, from, next) {if (to.name === "详情页") {from.meta.keepAlive = true; } else {from.meta.keepAlive = false;this.$destroy();}next();
},

乍一看没什么问题，到详情页的时候将keepAlive设为true进行缓存，返回到总览页的时候设置为false取消缓存，但仔细想一下，这样写是晚一步的，是否缓存在刚进入页面时就定下来了，在beforeRouteLeave的时候修改keepAlive，相当于修改的是下次进入页面时是否缓存

实际流程会变为

理想状态下
总览页		此时列表页路由的keepAlive默认为true	点击进入列表页
列表页		点击进入详情页		此时会缓存列表页，keepAlive仍为true
详情页		返回列表页	 获取缓存
这部分流程没有问题，接下来
列表页		返回总览页 	列表页被销毁，keepAlive变为false
总览页		点击进入列表页 	列表页keepAlive为false
这次列表页将不会被缓存，此时已经出现问题

那我们是不是可以不设置from.meta.keepAlive = false;，只在返回时销毁keep-alive的缓存，此时又出现了一个新的问题，在使用this.$destroy();销毁组件后会导致缓存异常（回退时不使用缓存的列表页，而是创建了个新的，并且会一直缓存）。详情可以百度this.$destroy()导致keep-alive缓存异常

Reference：vue-router时 keep-alive 页面缓存问题解决 - 知乎

调用$destroy后，组件生命周期出现异常。 · Issue #6961 · vuejs/vue · GitHub

所以要实现类似功能，就使用include和exclude，很多帖子纯纯的坑

对于上面的问题提供一种解决方案

还是对需要缓存的路由添加meta: { keepAlive: true}

维护一个页面栈，将访问过的页面添加进去，如果当前进入的页面在之前访问过，代表是回退操作，则将页面栈中在本页面之后的数据删除，使用include记得要给组件添加name

<template><div id="app"><keep-alive :include="cachePageList"><router-view></router-view></keep-alive></div>
</template>
<script>export default {data(){return {pageRouteList: [] // 访问过的页面栈}},computed: {cachePageList(){// 缓存只取页面栈中router设置了keepAlive的return this.pageRouteList.filter(route => route.meta.keepAlive).map(route => route.name)}},watch: {$route(to, from) {const index = this.pageRouteList.findIndex(route => route.fullPath === to.fullPath)const isVisited = index !== -1if (!isVisited) {this.pageRouteList.push(to)} else {this.pageRouteList.splice(index + 1)}}}}
</script>