diff --git a/escheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue b/escheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue
index b2fa1d73b9..53b34c2c4d 100644
--- a/escheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue
+++ b/escheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="assist-dag-model">
-    <template v-if="isView">
+    <template v-if="isView && isActive">
       <m-variables-view></m-variables-view>
     </template>
   </div>
@@ -11,7 +11,8 @@
     name: 'assist-dag-index',
     data () {
       return {
-        isView: false
+        isView: false,
+        isActive: true
       }
     },
     methods: {
@@ -19,6 +20,15 @@
         this.isView = !this.isView
       }
     },
+    watch: {
+      '$route': {
+        deep: true,
+        handler () {
+          this.isActive = false
+          this.$nextTick(() => (this.isActive = true))
+        }
+      }
+    },
     components: { mVariablesView }
   }
-</script>
\ No newline at end of file
+</script>