vue 使用keep-alive 三级以上的路由无法缓存解决方案

1、include 包含页面组件name的这些组件页面，会被缓存起来
2、exclude 除了这些name以外的页面组件，会被缓存起来
3、没有include或者exclude属性，表示所有的路由组件都会被缓存起来

<keep-alive><router-view :key="key" />
</keep-alive>computed: {key() {return this.$route.path}
}

注意
include 或者exclude的name 是页面组件里面具体的name，区分大小写

访问三级路由时，3级根路由的名称不会存入state.tagsView.cachedViews中，所以三级路由页面不会缓存。
解决方案：
在三级路由根页面中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存了

<script>
export default {name: 'Menu1',data() {return {...}},created() {const route = this.$route.matched.find(item => item.name === this.$options.name)this.$store.dispatch('tagsView/addCachedView', route)}
}
</script>

刷新或者关闭当前标签页，再次打开时，清除不了当前组件的缓存解决方法
找到store下面的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])})
},

以上就是相应的解决方案了