Vue中如何主动销毁被keep-alive缓存的组件？

本文共计1453个文字，预计阅读时间需要6分钟。

问题产生的背景：我们一个后台，在切换一些标签页的时候，使用的是keep-alive缓存的标签页，也使用了include属性来决定哪些页面进行缓存。但实际上，标签页的切换是路由的切换，而非简单的页面缓存。

问题产生的背景

我们一个后台，在切换一些标签页的时候，是使用的 keep-alive 缓存的标签页，也使用了 include 属性来决定哪个页面进行缓存，而标签页的切换实际上是路由的切换，也就是说打开一个新标签页的时候，url 会跟着变化，老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来。

然后客服人员就反馈页面开的久了就会崩溃，因为他们基础上不会刷新页面（工作需要），又总有切换标签的习惯，最后导致内存越来越大最后崩溃。

依赖环境

这个项目是基于一个开源 vue 后台框架：github.com/PanJiaChen/vue-element-admin，然后代码一直由几个后端开发维护的！所以后端没找出问题在哪，然后就我来接手这个问题了。
写文章时，标签里竟然没有 vue 这一项，差评！

定位问题

先梳理下业务逻辑：从业务场景来说，我们在标签页之间切换时，如果刚进入的这个标签页已被缓存了，那被缓存的标签页就直接拿出来展示就行，而关闭这个标签页的时候就应该销毁对应的组件。