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:我比較同意菜單權限列表一概放在後臺作, 這樣作風險遠比在前端處理的要小。