增加切换

src/pages/layout/Layout.vue

@@ -3,7 +3,7 @@
     <LeftNav/>
     <div class="right-con">
       <TopTitle/>
-      <!--<Tabs/>-->
+      <Tabs/>
       <router-view/>
     </div>
   </div>

src/pages/layout/tabs/Tabs.vue

@@ -2,10 +2,10 @@
   <div class="tabs">
     <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
       <el-tab-pane
-        :key="item.name"
+        :key="item.url"
         v-for="(item, index) in editableTabs"
         :label="item.title"
-        :name="item.name"
+        :name="item.url"
       >
       </el-tab-pane>
     </el-tabs>
@@ -22,49 +22,40 @@
     methods: {
       handleTabsEdit(targetName, action) {
         if (action === 'add') {
-          if (this.editableTabs.length > 2) {
-               this.editableTabs.forEach(item => {
-                //  console.log(item.name)
-                // if (path.indexOf(item.name) == -1) {
-
-                // }
-               })
+          if (this.editableTabs.length > 0) {
+              if (this.editableTabs.indexOf(targetName) == -1) {
+                    this.editableTabs.push(targetName);
+                }
           } else {
-            this.editableTabs.push({
-              title: targetName.title,
-              name: targetName.url,
-            });
-            this.editableTabsValue = targetName.url;
+            this.editableTabs.push(targetName);
           }
+          this.editableTabsValue = targetName.url;
+          this.$router.push({ path: targetName.url })
         }
         if (action === 'remove') {
           let tabs = this.editableTabs;
           let activeName = this.editableTabsValue;
-            tabs.forEach((tab, index) => {
-              if (tab.name === targetName) {
-                let nextTab = tabs[index + 1] || tabs[index - 1];
-                if (nextTab) {
-                  activeName = nextTab.name;
-                }
+          tabs.forEach((tab, index) => {
+            if (tab.url === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.url;
               }
-            });
+            }
+          });
           this.editableTabsValue = activeName;
-          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+          this.$router.push({ path: activeName })
+          this.editableTabs = tabs.filter(tab => tab.url !== targetName);
         }
-      }
-    },
-    watch: {
-      $route(to, from) {
+      },
+      initTab () {
         const router = this.$router.options.routes;
         const path = this.$route.path;
-        console.log(path)
         this.editableTabsValue = path;
         router.forEach(element => {
             if(element.children) {
               element.children.forEach(item => {
-                console.log(item.meta)
                 if (path.indexOf(item.meta.url) !== -1) {
-                  console.log(item.meta)
                   this.handleTabsEdit(item.meta, 'add')
                 }
               })
@@ -72,22 +63,13 @@
         });
       }
     },
+    watch: {
+      $route(to, from) {
+        this.initTab()
+      }
+    },
     mounted: function () {
-      const router = this.$router.options.routes;
-      const path = this.$route.path;
-      console.log(path)
-      this.editableTabsValue = path;
-      router.forEach(element => {
-          if(element.children) {
-            element.children.forEach(item => {
-              console.log(item.meta)
-              if (path.indexOf(item.meta.url) !== -1) {
-                console.log(item.meta)
-                this.handleTabsEdit(item.meta, 'add')
-              }
-            })
-          }
-      });
+        this.initTab()
     }
   }
 </script>