vue中keep-alive缓存组件不生效的坑

坑出现背景

  • 在维护公司代码时发现里面写watch route不生效,无法监听子路由的table切换。组件不会缓存,但是全局组件已经做过缓存处理。此处每次进入此table页都会触发created周期。花费大半个小时之后终于找到了问题点

坑的原因

  • keep-alive缓存时include中的名字必须与组件上的名字完全一致,组件没有写名字或者名字不一致就会导致缓存失效,每次进入组件都触发created生命周期

代码如下

  • 全局组件中
    <keep-alive include="history">
       <router-view></router-view>
    </keep-alive>
  • 组件中
export default {
  name: "history",/*此处的name必须有且与include中的一致*/
  components: {
    VTable
  },

如是,问题解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。