Vue中keep-alive组件不生效:
项目场景:从列表页跳转到详情页,期望从详情页返回上页,即回到列表页时,页面保持跳转之前的状态。
问题描述
不同的列表跳转到详情页面再返回。有的页面生效,有的页面不生效。
<keep-alive :include="cacheList">
<router-view />
</keep-alive>
原因分析:
首先从router.js文件查看两个页面的配置是否有差异,没发现问题。再打印出cacheList,查看是否被正确的改变,也一切正常。在列表页面查看created方法,确认每次进入页面都是被重新刷,代表keep-alive组件未生效,页面没有被正确缓存。比较列表页面的差别,会缓存的页面多一个配置项name;
解决方案:
添加配置项name,重新编译运行,页面被正确缓存,问题解决。
如下:
export default {
name: 'Home',
components: {
headero,
},
data() {
return {
routeArr: [],
menuList,
}
},