处理方案

要领一：

适用范围，菜单列表是经由过程接口返回的。

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:我比较赞同菜单权限列表一概放在背景做, 如许做风险远比在前端处置惩罚的要小。