vue缓存keep-alive不生效

今天在做keep-alive缓存时发现有的页面不生效，解决之后留个文章纪念下

切换标签不生效

<keep-alive :include="cacheList" >
  <router-view  ></router-view>
</keep-alive>

computed: {
      tagNavList () {
        let tagNavList = this.$store.state.app.tagNavList
        let lenght = tagNavList.length
        if (lenght > 9) {
          let subArr = tagNavList.slice(lenght - 8)
          subArr.unshift(tagNavList[0])
          return subArr
        } else {
          return tagNavList
        }
      },
      cacheList () { // 是否被缓存，notCache是不需要缓存的
        return ['home', 'ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
      },
    },

除了以上写法正确之外还需要确认name属性是否和路由中的name属性一样的

解决方案：

添加配置项name，重新编译运行，页面被正确缓存，问题解决。

因为项目是接手二次开发的，许多模板不是我开发的，命名就会有问题

export default {
  name: 'statistics-panel', // 就是这个name与你路由中的name属性是不是一样***重要
  data() {
    return {
      loading: false,
      show: false,
      getdate: []
    }
  },

当然你也可以借鉴这篇文章，因为我的另一个项目就是这么写的