测试菜单栏简单实现

frontend/src/performance/App.vue

@@ -10,7 +10,9 @@
       </el-col>
       <el-col :span="4">
         <el-row type="flex" justify="center" align="middle">
-          <el-button type="primary" size="small" @click="createTest">创建测试</el-button>
+          <router-link to="/createTest">
+            <el-button type="primary" size="small">创建测试</el-button>
+          </router-link>
         </el-row>
       </el-col>
       <el-col :span="10">
@@ -49,9 +51,6 @@
     },
     components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView},
     methods: {
-      createTest() {
-        this.$router.push({path: '/createTest'})
-      }
     }
   }
 </script>

frontend/src/performance/components/HeaderMenus.vue

 <template>
-  <el-menu class="header-menu" :unique-opened="true" mode="horizontal"
+  <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
            menu-trigger="click">
     <el-menu-item index="1"><a href="/" style="text-decoration: none;">{{ $t("i18n.home") }}</a></el-menu-item>
     <el-submenu index="2" popper-class="submenu">
@@ -19,10 +19,8 @@
     </el-submenu>
     <el-submenu index="4" popper-class="submenu">
       <template slot="title">测试</template>
-      <el-menu-item index="4-1">测试1</el-menu-item>
-      <el-menu-item index="4-2">测试2</el-menu-item>
-      <el-menu-item index="4-3">显示全部</el-menu-item>
-      <el-menu-item index="create-test" route="{path:'test'}">
+      <recent-test-plan/>
+      <el-menu-item index="/createTest">
         <el-button type="text">创建测试</el-button>
       </el-menu-item>
     </el-submenu>
@@ -36,8 +34,11 @@
 </template>
 
 <script>
+  import RecentTestPlan from "./testPlan/RecentTestPlan";
+
   export default {
-    name: "MsMenus"
+    name: "MsMenus",
+    components: {RecentTestPlan}
   }
 </script>
 

frontend/src/performance/components/testPlan/RecentTestPlan.vue

+<template>
+  <div>
+    <div class="recent-text">
+      <i class="el-icon-time"/>
+      最近的测试
+    </div>
+    <el-menu-item v-bind:key="recentTestPlan.id" v-for="recentTestPlan in recentTestPlans">
+      {{ recentTestPlan.name }}
+    </el-menu-item>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "RecentTestPlan",
+    data() {
+      return {
+        recentTestPlans: [{
+          id: 1,
+          name: "测试1"
+        }, {
+          id: 2,
+          name: "测试2"
+        }, {
+          id: 3,
+          name: "测试3"
+        }, {
+          id: 4,
+          name: "测试4"
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .recent-text {
+    padding-left: 10%;
+    color: #777777;
+  }
+</style>