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

解决方案

方法一：

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

方法二：

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

1、二级写成三级, 有人说我是二级你写成三级这样路径不就不对了嘛，这里在二级路由这地方利用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'
            }
          }
        ]
      }
    ]
  },

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

{
    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'
            }
          }
        ]
      }
    ]
  },

3、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>

测试结果

经测试上面两种写方法都可以解决二、三级路由切换时，界面数据不会缓存问题，不过具体场景要选择对应方法，但是为什么会出现这样问题，自己还没有深入了解，有时间一定要去探究其原理。
PS:我比较赞成菜单权限列表一律放在后台做, 这样做风险远比在前端处理的要小。