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 { isURL } from '@/utils/validate'
-  export default {
-    data () {
-      return {
-        dynamicMenuRoutes: []
+import SubMenu from "./main-sidebar-sub-menu";
+import { isURL } from "@/utils/validate";
+export default {
+  data() {
+    return {
+      dynamicMenuRoutes: []
+    };
+  },
+  components: {
+    SubMenu
+  },
+  computed: {
+    sidebarLayoutSkin: {
+      get() {
+        return this.$store.state.common.sidebarLayoutSkin;
       }
     },
-    components: {
-      SubMenu
-    },
-    computed: {
-      sidebarLayoutSkin: {
-        get () { return this.$store.state.common.sidebarLayoutSkin }
-      },
-      sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold }
-      },
-      menuList: {
-        get () { return this.$store.state.common.menuList },
-        set (val) { this.$store.commit('common/updateMenuList', val) }
-      },
-      menuActiveName: {
-        get () { return this.$store.state.common.menuActiveName },
-        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
-      },
-      mainTabs: {
-        get () { return this.$store.state.common.mainTabs },
-        set (val) { this.$store.commit('common/updateMainTabs', val) }
-      },
-      mainTabsActiveName: {
-        get () { return this.$store.state.common.mainTabsActiveName },
-        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+    sidebarFold: {
+      get() {
+        return this.$store.state.common.sidebarFold;
       }
     },
-    watch: {
-      $route: 'routeHandle'
+    menuList: {
+      get() {
+        return this.$store.state.common.menuList;
+      },
+      set(val) {
+        this.$store.commit("common/updateMenuList", val);
+      }
     },
-    created () {
-      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
-      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
-      this.routeHandle(this.$route)
+    menuActiveName: {
+      get() {
+        return this.$store.state.common.menuActiveName;
+      },
+      set(val) {
+        this.$store.commit("common/updateMenuActiveName", val);
+      }
     },
-    methods: {
-      // 路由操作
-      routeHandle (route) {
-        if (route.meta.isTab) {
-          // tab选中, 不存在先添加
-          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
-          if (!tab) {
-            if (route.meta.isDynamic) {
-              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
-              if (!route) {
-                return console.error('未能找到可用标签页!')
-              }
+    mainTabs: {
+      get() {
+        return this.$store.state.common.mainTabs;
+      },
+      set(val) {
+        this.$store.commit("common/updateMainTabs", val);
+      }
+    },
+    mainTabsActiveName: {
+      get() {
+        return this.$store.state.common.mainTabsActiveName;
+      },
+      set(val) {
+        this.$store.commit("common/updateMainTabsActiveName", val);
+      }
+    }
+  },
+  watch: {
+    $route: "routeHandle"
+  },
+  created() {
+    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
+    this.dynamicMenuRoutes = JSON.parse(
+      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
+    );
+    this.routeHandle(this.$route);
+  },
+  methods: {
+    // 路由操作
+    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 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];
+            if (!route) {
+              return console.error("未能找到可用标签页!");
             }
-            tab = {
-              menuId: route.meta.menuId || route.name,
-              name: route.name,
-              title: route.meta.title,
-              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
-              iframeUrl: route.meta.iframeUrl || '',
-              params: route.params,
-              query: route.query
-            }
-            this.mainTabs = this.mainTabs.concat(tab)
           }
-          this.menuActiveName = tab.menuId + ''
-          this.mainTabsActiveName = tab.name
+          tab = {
+            menuId: route.meta.menuId || route.name,
+            name: route.name,
+            title: route.meta.title,
+            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
+            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.menuActiveName = tab.menuId + "";
+        this.mainTabsActiveName = tab.name;
       }
     }
   }
+};
 </script>