diff --git a/frontend/src/business/components/api/test/ApiTestConfig.vue b/frontend/src/business/components/api/test/ApiTestConfig.vue
index 3e3d8386bf..618f72c38d 100644
--- a/frontend/src/business/components/api/test/ApiTestConfig.vue
+++ b/frontend/src/business/components/api/test/ApiTestConfig.vue
@@ -19,7 +19,7 @@
               <el-button type="primary" plain :disabled="isDisabled" @click="runTest">
                 {{$t('load_test.save_and_run')}}
               </el-button>
-              <el-button type="warning" plain @click="clear">{{$t('commons.clear')}}</el-button>
+              <el-button type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
             </el-row>
           </el-header>
           <ms-api-scenario-config :scenarios="test.scenarioDefinition" ref="config"/>
@@ -50,14 +50,7 @@
     },
 
     watch: {
-      '$route'(to) {
-        if (to.query.id) {
-          this.getTest(to.query.id);
-        } else {
-          this.test = new Test();
-          this.$refs.config.reset();
-        }
-      },
+      '$route': 'init',
       test: {
         handler: function () {
           this.change = true;
@@ -67,6 +60,19 @@
     },
 
     methods: {
+      init: function () {
+        this.result = this.$get("/project/listAll", response => {
+          this.projects = response.data;
+        })
+        if (this.id) {
+          this.getTest(this.id);
+        } else {
+          this.test = new Test();
+          if (this.$refs.config) {
+            this.$refs.config.reset();
+          }
+        }
+      },
       getTest: function (id) {
         this.result = this.$get("/api/get/" + id, response => {
           let item = response.data;
@@ -85,10 +91,7 @@
 
         this.result = this.$post("/api/save", this.getParam(), response => {
           this.test.id = response.data;
-          this.$message({
-            message: this.$t('commons.save_success'),
-            type: 'success'
-          });
+          this.$success(this.$t('commons.save_success'));
         });
       },
       runTest: function () {
@@ -96,14 +99,11 @@
 
         this.result = this.$post("/api/run", this.getParam(), response => {
           this.test.id = response.data;
-          this.$message({
-            message: this.$t('commons.save_success'),
-            type: 'success'
-          });
+          this.$success(this.$t('commons.save_success'));
         });
       },
-      clear: function () {
-        this.test = new Test();
+      cancel: function () {
+        this.$router.push('/api/test/list/all');
       },
       getParam: function () {
         return {
@@ -122,12 +122,7 @@
     },
 
     created() {
-      this.result = this.$get("/project/listAll", response => {
-        this.projects = response.data;
-      })
-      if (this.id) {
-        this.getTest(this.id);
-      }
+      this.init();
     }
   }
 </script>
diff --git a/frontend/src/business/components/api/test/ApiTestList.vue b/frontend/src/business/components/api/test/ApiTestList.vue
index 6333996fe5..a27943be27 100644
--- a/frontend/src/business/components/api/test/ApiTestList.vue
+++ b/frontend/src/business/components/api/test/ApiTestList.vue
@@ -75,16 +75,11 @@
       }
     },
 
-    watch: {
-      '$route'(to) {
-        this.projectId = to.params.projectId;
-        this.search();
-      }
-    },
-
-    created: function () {
-      this.projectId = this.$route.params.projectId;
-      this.search();
+    beforeRouteEnter(to, from, next) {
+      next(self => {
+        self.projectId = to.params.projectId;
+        self.search();
+      });
     },
 
     methods: {
@@ -121,10 +116,7 @@
           callback: (action) => {
             if (action === 'confirm') {
               this.result = this.$post("/api/delete", {id: test.id}, () => {
-                this.$message({
-                  message: this.$t('commons.delete_success'),
-                  type: 'success'
-                });
+                this.$success(this.$t('commons.delete_success'));
                 this.search();
               });
             }
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index 6c4e3a6c4e..bbd6603b53 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -5,6 +5,7 @@ import icon from "../common/js/icon";
 import filters from "../common/js/filter";
 import ajax from "../common/js/ajax";
 import App from './App.vue';
+import message from "../common/js/message";
 import router from "./components/common/router/router";
 import './permission' // permission control
 import i18n from "../i18n/i18n";
@@ -22,6 +23,7 @@ Vue.use(ElementUI, {
 Vue.use(filters);
 Vue.use(ajax);
 Vue.use(chart);
+Vue.use(message)
 
 // v-permission
 Vue.directive('permission', permission);
diff --git a/frontend/src/common/js/message.js b/frontend/src/common/js/message.js
new file mode 100644
index 0000000000..cb3d2fa2a8
--- /dev/null
+++ b/frontend/src/common/js/message.js
@@ -0,0 +1,48 @@
+import {Message} from 'element-ui';
+
+export default {
+  install(Vue) {
+    if (!Message) {
+      window.console.error('You have to install Message of ElementUI');
+      return
+    }
+
+    Vue.prototype.$success = function (message) {
+      Message.success({
+        message: message,
+        type: "success",
+        showClose: true,
+        duration: 1000
+      })
+    };
+
+    Vue.prototype.$info = function (message) {
+      Message.info({
+        message: message,
+        type: "info",
+        showClose: true,
+        duration: 3000
+      })
+    };
+
+    Vue.prototype.$warning = function (message) {
+      Message.warning({
+        message: message,
+        type: "warning",
+        showClose: true,
+        duration: 2000
+      })
+    };
+
+    Vue.prototype.$error = function (message) {
+      Message.error({
+        message: message,
+        type: "error",
+        showClose: true,
+        duration: 10000
+      })
+    };
+
+
+  }
+}