tab切换路由有缓存

src/views/main-sidebar.vue

@@ -5,7 +5,8 @@
         :default-active="menuActiveName || 'home'"
         :collapse="sidebarFold"
         :collapseTransition="false"
-        class="site-sidebar__menu">
+        class="site-sidebar__menu"
+      >
         <el-menu-item index="home" @click="$router.push({ name: 'home' })">
           <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">首页</span>
@@ -28,7 +29,8 @@
           v-for="menu in menuList"
           :key="menu.menuId"
           :menu="menu"
-          :dynamicMenuRoutes="dynamicMenuRoutes">
+          :dynamicMenuRoutes="dynamicMenuRoutes"
+        >
         </sub-menu>
       </el-menu>
     </div>
@@ -36,77 +38,114 @@
 </template>
 
 <script>
-  import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
-  import { isURL } from '@/utils/validate'
+import { isURL } from "@/utils/validate";
-  export default {
+export default {
-    data () {
+  data() {
     return {
       dynamicMenuRoutes: []
-      }
+    };
   },
   components: {
     SubMenu
   },
   computed: {
     sidebarLayoutSkin: {
-        get () { return this.$store.state.common.sidebarLayoutSkin }
+      get() {
+        return this.$store.state.common.sidebarLayoutSkin;
+      }
     },
     sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold }
+      get() {
+        return this.$store.state.common.sidebarFold;
+      }
     },
     menuList: {
-        get () { return this.$store.state.common.menuList },
+      get() {
-        set (val) { this.$store.commit('common/updateMenuList', val) }
+        return this.$store.state.common.menuList;
+      },
+      set(val) {
+        this.$store.commit("common/updateMenuList", val);
+      }
     },
     menuActiveName: {
-        get () { return this.$store.state.common.menuActiveName },
+      get() {
-        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
+        return this.$store.state.common.menuActiveName;
+      },
+      set(val) {
+        this.$store.commit("common/updateMenuActiveName", val);
+      }
     },
     mainTabs: {
-        get () { return this.$store.state.common.mainTabs },
+      get() {
-        set (val) { this.$store.commit('common/updateMainTabs', val) }
+        return this.$store.state.common.mainTabs;
+      },
+      set(val) {
+        this.$store.commit("common/updateMainTabs", val);
+      }
     },
     mainTabsActiveName: {
-        get () { return this.$store.state.common.mainTabsActiveName },
+      get() {
-        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+        return this.$store.state.common.mainTabsActiveName;
+      },
+      set(val) {
+        this.$store.commit("common/updateMainTabsActiveName", val);
+      }
     }
   },
   watch: {
-      $route: 'routeHandle'
+    $route: "routeHandle"
   },
-    created () {
+  created() {
-      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
+    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
-      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
+    this.dynamicMenuRoutes = JSON.parse(
-      this.routeHandle(this.$route)
+      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
+    );
+    this.routeHandle(this.$route);
   },
   methods: {
     // 路由操作
-      routeHandle (route) {
+    routeHandle(route) {
+      console.log("route at line 12384:", route);
       if (route.meta.isTab) {
         // tab选中, 不存在先添加
-          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
+        var tab = this.mainTabs.filter(item => item.name === route.name)[0];
+        var tabIndex = this.mainTabs.findIndex(item => item.name === route.name);
+        	console.log('tabIndex at line 113:', tabIndex)
         if (!tab) {
           if (route.meta.isDynamic) {
-              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
+            route = this.dynamicMenuRoutes.filter(
+              item => item.name === route.name
+            )[0];
             if (!route) {
-                return console.error('未能找到可用标签页!')
+              return console.error("未能找到可用标签页!");
             }
           }
           tab = {
             menuId: route.meta.menuId || route.name,
             name: route.name,
             title: route.meta.title,
-              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
+            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
-              iframeUrl: route.meta.iframeUrl || '',
+            iframeUrl: route.meta.iframeUrl || "",
             params: route.params,
             query: route.query
+          };
+          this.mainTabs = this.mainTabs.concat(tab);
+        } else {
+         
+          // this.mainTabs = this.mainTabs.concat({
+          //   ...tab,
+          //   params: route.params,
+          //   query: route.query
+          // });
+          this.mainTabs[tabIndex].query=route.query
+          this.mainTabs[tabIndex].params=route.query
+          console.log("at line 107:", "存在先添加",tab);
         }
-            this.mainTabs = this.mainTabs.concat(tab)
+        this.menuActiveName = tab.menuId + "";
-          }
+        this.mainTabsActiveName = tab.name;
-          this.menuActiveName = tab.menuId + ''
-          this.mainTabsActiveName = tab.name
-        }
       }
     }
   }
+};
 </script>