修复三级菜单之间切换页面无法缓存的bug

Author: zhigang.li

src/components/parent-view/parent-view.vue

@@ -1,8 +1,20 @@
 <template>
-  <router-view/>
+  <keep-alive :exclude="notCacheName">
+    <router-view ref="child"/>
+  </keep-alive>
 </template>
 <script>
 export default {
-  name: 'ParentView'
+  name: 'ParentView',
+  data () {
+    return {
+      cacheChaildName: ''
+    }
+  },
+  computed: {
+    notCacheName () {
+      return (this.$route.meta && this.$route.meta.notCache) ? this.$route.name : ''
+    }
+  }
 }
 </script>

src/locale/lang/en-US.js

@@ -21,6 +21,7 @@ export default {
   level_2_3: 'Level-2-3',
   level_2_2: 'Level-2-2',
   level_2_2_1: 'Level-2-2-1',
+  level_2_2_2: 'Level-2-2-2',
   excel: 'Excel',
   'upload-excel': 'Upload Excel',
   'export-excel': 'Export Excel',

src/locale/lang/zh-CN.js

@@ -21,6 +21,7 @@ export default {
   level_2_3: 'Level-2-3',
   level_2_2: 'Level-2-2',
   level_2_2_1: 'Level-2-2-1',
+  level_2_2_2: 'Level-2-2-2',
   excel: 'Excel',
   'upload-excel': '上传excel',
   'export-excel': '导出excel',

src/locale/lang/zh-TW.js

@@ -21,6 +21,7 @@ export default {
   level_2_3: 'Level-2-3',
   level_2_2: 'Level-2-2',
   level_2_2_1: 'Level-2-2-1',
+  level_2_2_2: 'Level-2-2-2',
   excel: 'Excel',
   'upload-excel': '上傳excel',
   'export-excel': '導出excel',

src/router/routers.js

@@ -381,7 +381,16 @@ export default [
               icon: 'md-funnel',
               title: '三级'
             },
-            component: () => import('@/view/multilevel/level-2-2/level-3-1.vue')
+            component: () => import('@/view/multilevel/level-2-2/level-2-2-1.vue')
+          },
+          {
+            path: 'level_2_2_2',
+            name: 'level_2_2_2',
+            meta: {
+              icon: 'md-funnel',
+              title: '三级'
+            },
+            component: () => import('@/view/multilevel/level-2-2/level-2-2-2.vue')
           }
         ]
       },

src/view/multilevel/level-2-2/level-2-2-1.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h3>多级菜单 -> 二级-2 -> 3级1</h3>
+    <Input v-model="val" style="width: 200px"></Input>
+  </div>
+</template>
+<script>
+export default {
+  name: 'level_2_2_1',
+  data () {
+    return {
+      val: ''
+    }
+  }
+}
+</script>

src/view/multilevel/level-2-2/level-2-2-2.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h3>多级菜单 -> 二级-2 -> 3级2</h3>
+    <Input v-model="val" style="width: 200px"></Input>
+  </div>
+</template>
+<script>
+export default {
+  name: 'level_2_2_2',
+  data () {
+    return {
+      val: ''
+    }
+  }
+}
+</script>