参考vue-element-admin页面结构
    keep-alive:缓存的前提是菜单路由的的name：属性要和页面的name：属性值保持一致。可以都采用首字母大写形式
    keep-alive数据缓存功能只能缓存俩级菜单，当大于俩级菜单时，缓存会失效。
    keep-alive的三个属性
    include: patternTypes, // 缓存白名单
    exclude: patternTypes, // 缓存黑名单
    max: [String, Number] // 缓存的组件

    第一种处理方法：第一级layout中的AppMain.vue中，做keep-alive全缓存处理。当有不想缓存的数据时，在使用exclude进行过滤。

    1. // 目录：src/layout/components/AppMain.vue
    2. // 页面信息全缓存
    3. <template>
    4.   <section class="app-main">
    5.     <transition name="fade-transform" mode="out-in">
    6.     // 页面信息全缓存
    7.       <keep-alive >
    8.         <router-view :key="key" />
    9.       </keep-alive>
    10.     </transition>
    11.   </section>
    12. </template>
    14. <script>
    15. export default {
    16.   name: 'AppMain',
    17.   computed: {
    18.     cachedViews() {
    19.       return this.$store.state.tagsView.cachedViews
    20.     },
    21.     key() {
    22.       return this.$route.path
    23.     }
    24.   }
    25. }
    26. </script>

    store中的获取菜单名称的方式

    1. 目录：src/store/modules/tagsView.js。mutations方法
    2. 前提：
    3. <keep-alive :include="cachedViews">
    4.     <router-view :key="key" />
    5. </keep-alive>
    7. // noCache：true,不缓存信息，false:缓存信息
    8.  ADD_CACHED_VIEW: (state, view) => {
    9.     if (state.cachedViews.includes(view.name)) return
    10.     if (!view.meta.noCache) {
    11.       state.cachedViews.push(view.name)
    12.     }
    13.   },

    第二种方式：推荐方式，可以方便自定义页面缓存，只需按照keep-alive的缓存规则即可

    1. // 目录：src/layout/components/AppMain.vue
    2. <template>
    3.   <section class="app-main">
    4.     <transition name="fade-transform" mode="out-in">
    5.       <keep-alive :include="cachedViews">
    6.         <router-view :key="key" />
    7.       </keep-alive>
    8.     </transition>
    9.   </section>
    10. </template>
    12. <script>
    13. export default {
    14.   name: 'AppMain',
    15.   computed: {
    16.     cachedViews() {
    17.       return this.$store.state.tagsView.cachedViews
    18.     },
    19.     key() {
    20.       return this.$route.path
    21.     }
    22.   }
    23. }
    24. </script>

    store中的获取菜单名称的方式

    1.   // 目录：src/store/modules/tagsView.js。mutations方法
    2.   ADD_CACHED_VIEW: (state, view) => {
    3.     if (state.cachedViews.includes(view.name)) return;
    4.     const { matched, meta, name } = view;
    5.     if (!meta.noCache) {
    6.       if (matched.length > 2) {
    7.         //路由层级大于2时，将父级也加入cachedViews
    8.         for (let i = 1; i < matched.length; i++) {
    9.           if (!state.cachedViews.includes(matched[i].name)) {
    10.             state.cachedViews.push(matched[i].name);
    11.           }
    12.         }
    13.       } else {
    14.         state.cachedViews.push(name);
    15.       }
    16.     }
    17.   },

    大于等于三级以上页面的layout扩展页面

    1. /* router模板 用于增加菜单层级 */
    3. <template>
    4.   <keep-alive :include="cachedViews">
    5.     <router-view :key="key"/>
    6.   </keep-alive>
    7. </template>
    9. <script>
    10. export default {
    11.   // 三级菜单特殊处理方式，如果是三级菜单，父级的name必须是TertiaryMenu，否则无法缓存。同理四级菜单
    12.   name: 'TertiaryMenu', 
    13.   computed: {
    14.     cachedViews() {
    15.       return this.$store.state.tagsView.cachedViews
    16.     },
    17.     key() {
    18.       return this.$route.fullPath
    19.     }
    20.   }
    21. }
    22. </script>
    24. <style scoped></style>

    路由菜单配置示例：
    router.png
    参考文档：https://www.jianshu.com/p/9523bb439950