From 9ad96525af3a26c2f4e8d4e9016f801c44df1f80 Mon Sep 17 00:00:00 2001
From: dingangang <dingangang@vip.qq.copm>
Date: Wed, 15 Apr 2020 15:59:15 +0800
Subject: [PATCH] =?UTF-8?q?3=E7=BA=A7=E8=B7=AF=E7=94=B1=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

访问3级路由时，3级根路由的名称不会存入state.tagsView.cachedViews中，所以3级路由页面不会缓存。
找到了一种解决方案：
在3级路由根页面即本例的\nested\menu1\index.vue中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存，并且更深层级如menu1-2-1也可以进行缓存。
---
 src/views/nested/menu1/index.vue                 | 16 ++++++++++++++++
 src/views/nested/menu1/menu1-1/index.vue         | 13 +++++++++++++
 src/views/nested/menu1/menu1-2/index.vue         | 13 +++++++++++++
 .../nested/menu1/menu1-2/menu1-2-1/index.vue     | 15 ++++++++++++++-
 .../nested/menu1/menu1-2/menu1-2-2/index.vue     | 15 ++++++++++++++-
 src/views/nested/menu1/menu1-3/index.vue         | 15 ++++++++++++++-
 6 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index 30cb6701..cd589d33 100644
--- 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
index 27e173a6..983c25ff 100644
--- 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
index 0c86276e..7c7a45da 100644
--- 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
index f87d88f4..8bb86245 100644
--- 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
index d88789f2..7e0b3d43 100644
--- 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
index f7cd0738..822faf23 100644
--- 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>