🐛 优化组件被复用导致没有刷新数据的bug

src/cache.js

@@ -5,18 +5,18 @@ Vue.mixin({
     if (this.$route.meta.keepAlive === true) {
       const result = this.$route.meta.keepAlive === true && store.state.tags.tagList.some(ele => {
         return ele.value === this.$route.fullPath;
-      })
+      });
       if (this.$vnode && !result) {
         if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
           if (this.$vnode.componentOptions) {
-            var key = this.$vnode.key == null
+            let key = this.$vnode.key == null
               ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
               : this.$vnode.key;
-            var cache = this.$vnode.parent.componentInstance.cache;
+            let cache = this.$vnode.parent.componentInstance.cache;
-            var keys = this.$vnode.parent.componentInstance.keys;
+            let keys = this.$vnode.parent.componentInstance.keys;
             if (cache[key]) {
               if (keys.length) {
-                var index = keys.indexOf(key);
+                let index = keys.indexOf(key);
                 if (index > -1) {
                   keys.splice(index, 1);
                 }
@@ -27,7 +27,6 @@ Vue.mixin({
         }
       }
     }
-
     next();
   },
-});
+});

src/views/work/process/leave/handle.vue

@@ -13,25 +13,25 @@
           <span>审批信息</span>
         </div>
         <el-form-item label="申请人">
-          <el-input :disabled="true" v-model="form.flow.assigneeName" />
+          <el-input :disabled="true" v-model="form.flow.assigneeName"/>
         </el-form-item>
         <el-row>
           <el-col :span="12">
             <el-form-item label="开始时间">
-              <el-input :disabled="true" v-model="form.startTime" />
+              <el-input :disabled="true" v-model="form.startTime"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="结束时间">
-              <el-input :disabled="true" v-model="form.endTime" />
+              <el-input :disabled="true" v-model="form.endTime"/>
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="请假理由">
-          <el-input :disabled="true" type="textarea" v-model="form.reason" />
+          <el-input :disabled="true" type="textarea" v-model="form.reason"/>
         </el-form-item>
         <el-form-item label="批复意见">
-          <el-input type="textarea" v-model="form.comment" />
+          <el-input type="textarea" v-model="form.comment"/>
         </el-form-item>
       </el-card>
       <el-card shadow="hover">
@@ -89,6 +89,16 @@
     created() {
       this.init();
     },
+    beforeRouteUpdate(to, from, next) {
+      // 在当前路由改变，但是该组件被复用时调用
+      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
+      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
+      // 可以访问组件实例 `this`
+      if (to.fullPath !== from.fullPath) {
+        next();
+        this.init();
+      }
+    },
     methods: {
       init() {
         this.taskId = this.$route.params.taskId;