问题产生的背景
我们一个后台，在切换一些标签页的时候，是使用的
keep-alive 缓存的标签页，也使用了
include 属性来决定哪个页面进行缓存，而标签页的切换实际上是路由的切换，也就是说打开一个新标签页的时候，url 会跟着变化，老的标签页如果在
keep-alive 的
include 范围内那就会缓存下来。然后客服人员就反馈页面开的久了就会崩溃，因为他们基础上不会刷新页面（工作需要），又总有切换标签的习惯，最后导致内存越来越大最后崩溃。
依赖环境
这个项目是基于一个开源
vue 后台框架：
https://github.com/PanJiaChen/vue-element-admin，然后代码一直由几个后端开发维护的！所以后端没找出问题在哪，然后就我来接手这个问题了。写文章时，标签里竟然没有
vue 这一项，差评！定位问题
先梳理下业务逻辑：从业务场景来说，我们在标签页之间切换时，如果刚进入的这个标签页已被缓存了，那被缓存的标签页就直接拿出来展示就行，而关闭这个标签页的时候就应该销毁对应的组件。
花了点时间查看了一下代码，发现问题在于关闭标签页的时候，虽然这个页面没在
keep-alive 的
include 里了，但是组件也没有被销毁掉，还是在缓存状态，我们可以通过
Vue Devtools 插件看到关闭后的标签页对应的组件一直还存在着：
当然，在这块
keep-alive 本身的逻辑我觉得是没问题的，主要是我们项目比较复杂，缓存的组件太多了而且会一直增加，所以最终导致崩溃。解决问题
既然问题已经定位了，那就好解决问题了，只需要在关闭标签页的时候把对应的组件也销毁掉就好了。
经过网上一翻查找，发现销毁一个组件可以使用：
this.$destroy(‘组件名') 来销毁。先说下大概思路：
keep-alive 的
include 里存的其实是一个
vuex 中的一个数据源（数据源保存的是路由名称），当关闭标签页时，这个数据源中的一项会被移除。这之前，我们在组件里监听到这个数据源的变化，如果此组件对应的路由（这个路由应在
