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

作者: 豁啦子 | 来源:发表于2020-05-11 19:10 被阅读0次

在维护公司代码时发现里面写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
  },

如是，问题解决

keep-alive
概念 keep-alive 是 vue 内置的组件，用 keep-alive 包裹组件时，会缓存不活动的组件实例，...
vue中keep-alive缓存组件不生效的坑
坑出现背景在维护公司代码时发现里面写watch route不生效，无法监听子路由的table切换。组件不会缓存，...
重学Vue--keep-alive的使用
keep-alive是什么？ keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件...
[vue3进阶] 8.keepAlive
keep-alive是vue自带的一个标签，用keep-alive包裹的组件，在这个组件不活动时，vue会自动缓存...
vue2.0中keep-alive实践
vue2.0中keep-alive实践 vue2.0提供了一个keep-alive组件，用来缓存组件,避免多次加载...
Vue—KeepAlive源码探究，适时清理页面缓存
前言使用过 Vue 的小伙伴们肯定都知道，Vue 的内部组件keep-alive是用来缓存我们不活动的组件的。 ...
在 React 中实现 keep alive
什么是 keep alive 在 Vue 中，我们可以使用 keep-alive 包裹一个动态组件，从而缓存不活跃...
随笔
缓存：包裹动态组件时，会缓存不活动的组件实例，而不是销...
Vue中keep-alive的使用
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它...
keepalive配合标签页进行注册和销毁
技术栈：vue，vue-router 是什么 keep-alive是vue中提供缓存不活动组件的标签，可以支持一些...