美文网首页
Vue keep-alive 缓存动态组件实例不销毁组件

Vue keep-alive 缓存动态组件实例不销毁组件

作者: 黎明的叶子 | 来源:发表于2023-08-29 17:50 被阅读0次

背景

有多个keep-alive 导致两个组下 互相删除不起作用。页面中路由嵌套的多,每层嵌套的下面都有一个keep-alive。然后tab菜单删除缓存未清掉。

解决方法

把嵌套的路由打平,只存在一级。外层只包裹一个keep-alive。
然后通过动态修改keep-alive组件的 include属性。来实现关闭tab标签,则删除对应的include。

代码

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

//keepAliveNames 可以是一个数组,里面存着的是要缓存的组件的name值。定义组件的时候要制定name。是根据这个name 做缓存的。

最好的方式是将打开的tab页面数组和keepAliveNames 整合为一个数组。数据保持统一性。这样tab页面删除,keepAliveNames里面也自动删除。如果不是一份数据,则需要维护两份数据保持一致。有点麻烦,还容易有时候不一致,产生bug。

相关文章

  • Vue中keep-alive的使用

    概念    keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它...

  • vue中keep-alive

    官方定义 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们...

  • vue keep-alive以及activated,deacti

    vue官网的描述: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似...

  • vue 2.0中keep-alive 组件缓存

    keep-alive用法 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 ...

  • keep-alive的使用过程以及修改bug遇到的那些坑

    keep-alive的使用介绍 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。...

  • vue keep-alive

    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相...

  • KeepAlive说明

    KeepAlive说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 主要用...

  • vue keep-alive以及activated,deacti

    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似,

  • 30_keep-alive

    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。主要用于保留组件状态或避免重新渲染

  • vue内置的组件

    keep-alive 主要用于保留组件状态或避免重新渲染,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。...

网友评论

      本文标题:Vue keep-alive 缓存动态组件实例不销毁组件

      本文链接:https://www.haomeiwen.com/subject/lgxomdtx.html