电证整合，解决keep-alive缓存iframe刷新的问题

src/components/SubMenu.vue

@@ -17,7 +17,6 @@
         </template>
         <SubMenu :subMenuList="item.children" :openFlgArr="openFlgArr" />
       </el-submenu>
-      <!-- <el-menu-item v-else :key="item.path" :index="item.isDz ? null : item.path" @click="gotoView(item)"> -->
       <el-menu-item v-else :key="item.path" :index="item.path" 
         :route="item.isDz ? { name: 'DzSys', params: { path: getDynamicPath(item.path), title: item.name}} : { path: item.path }">
         <template slot="title">
@@ -40,14 +39,6 @@ export default {
     getOpenFlag(index) {
       return this.openFlgArr.includes(index);
     },
-    // gotoView(item) {
-    //   if (!item.isDz) {
-    //     return
-    //   }
-    //   const path = item.path
-    //   const p = path.split("/")
-    //   this.$router.push({name: 'DzSys', params: {path: p[p.length - 1], title: item.name}})
-    // }
     getDynamicPath(path) {
       const p = path.split("/")
       return p[p.length - 1]

src/views/Business/BusRouter.js

@@ -214,7 +214,6 @@ import Dbiusr from "./Dbiusr"
 import Dbibch from "./Dbibch"
 import Infact from "./Infact"
 
-import DzSys from "~/views/Layout/dz/DzSys.vue";
 
 /**
  * 带有name的才会被添加进顶部的标签页里
@@ -443,6 +442,6 @@ const BusRouter = [
     { path: 'Ordrel', component: Ordrel, name: 'Ordrel', meta: { title: 'Ordrel' } },
     { path: 'Infact', component: Infact, name: 'Infact', meta: { title: '账户' } },
 
-    { path: 'dzsys/:path', component: DzSys, name: 'DzSys', meta: { title: (tag) => { return '电证 - ' + tag.params.title } } },
+    { path: 'dzsys/:path', name: 'DzSys', meta: { title: (tag) => { return '电证 - ' + tag.params.title } } },
 ]
 export default BusRouter
\ No newline at end of file

src/views/Business/index.vue

@@ -5,10 +5,22 @@
         <router-view :key="key" />
       </keep-alive>
     </transition>
+
+    <component
+      v-for="item in hasOpenComponentsArr"
+      :key="item.name"
+      :is="item.name"
+      v-show="$route.path === item.path"
+    ></component>
   </section>
 </template>
 
 <script>
+import Vue from "vue";
+
+import DzSys from "~/views/Layout/dz/DzSys.vue";
+import { getDzSysMenu } from "~/views/Layout/dz/menus.js";
+
 export default {
   name: "Business",
   watch: {
@@ -18,19 +30,78 @@ export default {
       } else {
         this.$store.commit("setMode", "normal");
       }
+
+      this.componentsArr.forEach(comp => {
+        if (!this.visitedViews.find(view => view.path === comp.path)) {
+          comp.hasOpen = false
+        }
+      })
+      // 判断当前路由是否iframe页
+      this.isOpenIframePage();
     },
   },
-  created: () => {
+  created() {
     console.log("进入业务交易界面");
+
+    // 设置iframe页的数组对象
+    const componentsArr = []
+    const dzSysMenu = getDzSysMenu()
+    this.getComponentsArr(componentsArr, dzSysMenu ? dzSysMenu.children : []);
+    componentsArr.forEach((item) => {
+        Vue.component(item.name, DzSys);
+    });
+    this.componentsArr = componentsArr;
+    // 判断当前路由是否iframe页
+    this.isOpenIframePage();
   },
   computed: {
     cachedViews() {
       return this.$store.state.TagsView.cachedViews;
     },
+    visitedViews() {
+      return this.$store.state.TagsView.visitedViews;
+    },
     key() {
       return this.$route.path;
     },
+    // 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
+    hasOpenComponentsArr() {
+      return this.componentsArr.filter(item => item.hasOpen);
+    }
+  },
+  data() {
+    return {
+      componentsArr: []
+    }
   },
+  methods: {
+    // 根据当前路由设置hasOpen
+    isOpenIframePage() {
+        const target = this.componentsArr.find(item => {
+            return item.path === this.$route.path
+        });
+        if (target && !target.hasOpen) {
+            target.hasOpen = true;
+        }
+    },
+    // 遍历路由的所有页面，把含有iframeComponent标识的收集起来
+    getComponentsArr(arr, menus) {        
+        for (let i = 0; i < menus.length; i++) {
+          const menu = menus[i];
+          if (menu.children.length) {
+            const tempArr = []
+            this.getComponentsArr(tempArr, menu.children)
+            arr.push(...tempArr)
+          } else {
+            arr.push({
+              name: menu.value,
+              path: menu.path,
+              hasOpen: false, // 是否打开过，默认false
+            })
+          }
+        }
+    }
+  }
 };
 </script>
 

src/views/Layout/dz/menus.js

@@ -14,10 +14,11 @@ const generateMenuTree = (menus) => {
 		} else {
 			arr.push({
 				name: menu.label,
+				value: 'dzsys-' + menu.value,
 				path: '/business/dzsys/' + menu.value,
-        isDz: true,
-        icon: "el-icon-document",
-        children: []
+				isDz: true,
+				icon: "el-icon-document",
+				children: []
 			})
 		}
 	}
@@ -25,16 +26,16 @@ const generateMenuTree = (menus) => {
 }
 
 export const getDzSysMenu = () => {
-  const menuStr = window.sessionStorage.getItem('menu')
-  if (!menuStr) {
-    return null;
-  }
-  const menusConfig = JSON.parse(menuStr);
-  // menusConfig.unshift( { id: null, label: "登陆", value: "login", subMenu: [] } )
-  return {
-    name: '电证系统',
-    index: 'dzsys',
-    path: 'dzsys',
-    children: generateMenuTree(menusConfig)
-  }
+	const menuStr = window.sessionStorage.getItem('menu')
+	if (!menuStr) {
+		return null;
+	}
+	const menusConfig = JSON.parse(menuStr);
+	// menusConfig.unshift( { id: null, label: "登陆", value: "login", subMenu: [] } )
+	return {
+		name: '电证系统',
+		index: 'dzsys',
+		path: 'dzsys',
+		children: generateMenuTree(menusConfig)
+	}
 }