refine

src/views/example/components/ArticleDetail.vue

@@ -3,9 +3,6 @@
     <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
 
       <sticky :className="'sub-navbar '+postForm.status">
-        <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}">
-          <el-button type="info">创建form</el-button>
-        </router-link>
 
         <el-dropdown trigger="click">
           <el-button plain>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
@@ -55,6 +52,9 @@
 
       <div class="createPost-main-container">
         <el-row>
+          <p class="warn-content">
+            创建和编辑页面是不能被keep-alive缓存的，因为keep-alive目前不支持根据路由来缓存，所以目前都是基于component name来缓存的，如果你想要实现缓存的效果，可以使用localstorage等游览器缓存方案。或者不要使用keep-alive 的include，直接缓存所有页面。
+          </p>
           <el-col :span="21">
             <el-form-item style="margin-bottom: 40px;" prop="title">
               <MDinput name="name" v-model="postForm.title" required :maxlength="100">

src/views/layout/components/AppMain.vue

@@ -2,7 +2,7 @@
   <section class="app-main" style="min-height: 100%">
     <transition name="fade" mode="out-in">
       <keep-alive :include="cachedViews">
-        <router-view></router-view>
+        <router-view :key="key"></router-view>
       </keep-alive>
     </transition>
   </section>
@@ -14,10 +14,10 @@ export default {
   computed: {
     cachedViews() {
       return this.$store.state.tagsView.cachedViews
+    },
+    key() {
+      return this.$route.fullPath
     }
-    // key() {
-    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-    // }
   }
 }
 </script>

src/views/layout/components/TagsView.vue

@@ -59,7 +59,7 @@ export default {
       return false
     },
     isActive(route) {
-      return route.path === this.$route.path || route.name === this.$route.name
+      return route.path === this.$route.path
     },
     addViewTags() {
       const route = this.generateRoute()