3级路由缓存问题

dingangang · dingangang · commit 9ad96525af3a · 2020-04-15T15:59:15.000+08:00
访问3级路由时，3级根路由的名称不会存入state.tagsView.cachedViews中，所以3级路由页面不会缓存。
找到了一种解决方案：
在3级路由根页面即本例的\nested\menu1\index.vue中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存，并且更深层级如menu1-2-1也可以进行缓存。
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
@@ -1,7 +1,23 @@
 <template>
   <div style="padding:30px;">
     <el-alert :closable="false" title="menu 1">
+      <el-input v-model="input" placeholder="placeholder" />
       <router-view />
     </el-alert>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'Menu1',
+  data() {
+    return {
+      input: 'Menu1'
+    }
+  },
+  created() {
+    const route = this.$route.matched.find(item => item.name === 'Menu1')
+    this.$store.dispatch('tagsView/addCachedView', route)
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
@@ -1,7 +1,20 @@
 <template>
   <div style="padding:30px;">
+    <el-input v-model="input" placeholder="placeholder" />
     <el-alert :closable="false" title="menu 1-1" type="success">
       <router-view />
     </el-alert>
   </div>
 </template>
+
+<script>
+export default {
+  /* eslint-disable-next-line */
+  name: 'Menu1-1',
+  data() {
+    return {
+      input: 'Menu1-1'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
@@ -1,7 +1,20 @@
 <template>
   <div style="padding:30px;">
     <el-alert :closable="false" title="menu 1-2" type="success">
+      <el-input v-model="input" placeholder="placeholder" />
       <router-view />
     </el-alert>
   </div>
 </template>
+
+<script>
+export default {
+  /* eslint-disable-next-line */
+  name: 'Menu1-2',
+  data() {
+    return {
+      input: 'Menu1-2'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -1,5 +1,18 @@
-<template functional>
+<template>
   <div style="padding:30px;">
+    <el-input v-model="input" placeholder="placeholder" />
     <el-alert :closable="false" title="menu 1-2-1" type="warning" />
   </div>
 </template>
+
+<script>
+export default {
+  /* eslint-disable-next-line */
+  name: 'Menu1-2-1',
+  data() {
+    return {
+      input: 'Menu1-2-1'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -1,5 +1,18 @@
-<template functional>
+<template>
   <div style="padding:30px;">
+    <el-input v-model="input" placeholder="placeholder" />
     <el-alert :closable="false" title="menu 1-2-2" type="warning" />
   </div>
 </template>
+
+<script>
+export default {
+  /* eslint-disable-next-line */
+  name: 'Menu1-2-2',
+  data() {
+    return {
+      input: 'Menu1-2-2'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
@@ -1,5 +1,18 @@
-<template functional>
+<template>
   <div style="padding:30px;">
+    <el-input v-model="input" placeholder="placeholder" />
     <el-alert :closable="false" title="menu 1-3" type="success" />
   </div>
 </template>
+
+<script>
+export default {
+  /* eslint-disable-next-line */
+  name: 'Menu1-3',
+  data() {
+    return {
+      input: 'Menu1-3'
+    }
+  }
+}
+</script>
