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>