Vue keep-alive组件不能正确缓存页面

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,
    }
  },