vue 使用keep-alive 三级以上的路由，无法缓存问题

使用vue-element-admin脚手架做系统时，一般系统的侧边栏都是有父级，子级，子子级，发现使用keep-alive，当三级以上的路由时，无法缓存页面？？

那首先要了解下keep-alive的作用是啥？

是用来对页面组件进行缓存不缓存的处理，拥有缓存页面组件，再次进入时，使用原来已经加载好的内容，可以大大的节省请求和渲染时间，是个好东西！
那它具体的属性有2种：
include ,包含页面组件name的这些组件页面，会被缓存起来
exclude 除了这些name以外的页面组件，会被缓存起来
还有第3种，如下这样写(即没有include或者exclude属性，表示所有的路由组件都会被缓存起来！！)

坑点一

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>


<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

坑点二：

发现keep-alive中的include属性或者exclude属性都不管用！后来查阅了一番，发现这个include 或者exclude的name 是页面组件里面具体的name， 就像这样：（凡是是路由组件，在对应的这个组件页面显示的添着补上对应的name属性啊！别偷懒！）

这个具体vue组件页面的name要跟你router文件中配置的name一样
因为在每次打开标签页和关闭标签页处理时，是根据name来匹配，进行添加删除。如果组件内部页面配置的name是Order,而路由文件配置的name是order,那include和exclude也不会有用！

坑点三：

修改模板src/store/modules/tagsView.js

tagsView.js

addCachedView({ commit }, view) {
   if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由点击打开标签页时，将三级路由或以上的根目录路由塞入缓存路由name list中
   commit('ADD_CACHED_VIEW', view.matched[1])
  }
   commit('ADD_CACHED_VIEW', view) // 反之，正常的进行标签页的添加进缓存路由name list中
},


delCachedView({ commit, state }, view) {
  return new Promise(resolve => {
    if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由关闭当前标签页时，将3级路由以上的根目录name 从list中删除
    commit('DEL_CACHED_VIEW', view.matched[1])
  }
   commit('DEL_CACHED_VIEW', view) // 反之，正常的进行标签页的name 从list中删除
   resolve([...state.cachedViews])
  })
},