Element作管理系统时 二、3级路由切换时，界面数据不缓存问题

解决方案

方法一：

适用范围，菜单列表是经过接口返回的。
PS：只要经过接口返回的菜单列表就意味着用户是能够访问的，权限处理一概放在后台作，但写本地路由时不管是二级界面仍是三级界面，配置路由时统一配置成二级路径，这样就能够保证它们能够在同一级别，天然而然的就不会出现题目所说的问题

方法二：

适用范围，菜单列表访问权限是在前端作的。 PS: 菜单列表不是接口返回的，接口只返回访问菜单的权限，大致意思就是统一把路由写成三级形式。

一、二级写成三级, 有人说我是二级你写成三级这样路径不就不对了嘛，这里在二级路由这地方利用path: '/test'
这样写url依然是二级路径

{
    path: '/test',
    component: layOut,
    children: [
      {
        path: '/test',
        component: blank,  
        children: [
          {
            path: 'test_page1',
            name: 'test_page1',
            component: resolve =>
              require(['@/views/test/test_page1/list.vue'], resolve),
            meta: {
              label: '测试界面1',
              icon: '',
              cache: true,
              closable: true,
              routerPath: '/test/test_page1'
            }
          }
        ]
      }
    ]
  },

二、三级就照着三级的路由写

{
    path: '/test',
    component: layOut,
    children: [
      {
        path: 'test_page2',
        name: 'test_page2',
        component: blank,
        children: [
          {
            path: 'test_page3',
            name: 'test_page3',
            component: resolve =>
              require(['@/views/test_page2/test_page3/list.vue'], resolve),
            meta: {
              label: '测试界面2',
              cache: true,
              closable: true,
              routerPath: '/test/test_page2/test_page3'
            }
          }
        ]
      }
    ]
  },

三、component: blank, 这地方须要作一下缓存

<template>
    <transition name="fade" mode="out-in">
        <keep-alive :include='cachedViews'>
            <router-view></router-view>
        </keep-alive>
    </transition>
</template>

<script>
export default {
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    }
  }
}
</script>

测试结果

经测试上面两种写方法均可以解决2、三级路由切换时，界面数据不会缓存问题，不过具体场景要选择对应方法，可是为何会出现这样问题，本身尚未深刻了解，有时间必定要去探究其原理。 PS:我比较同意菜单权限列表一概放在后台作, 这样作风险远比在前端处理的要小。