优化页面内嵌iframe切换tab不刷新数据

src/layout/components/AppMain.vue

@@ -2,23 +2,20 @@
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
-        <keep-alive :include="cachedViews">
-          <component :is="Component" :key="route.path"/>
+        <keep-alive :include="tagsViewStore.cachedViews">
+          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
         </keep-alive>
       </transition>
     </router-view>
+    <iframe-toggle />
   </section>
 </template>
 
 <script setup>
+import iframeToggle from "./IframeToggle/index"
 import useTagsViewStore from '@/store/modules/tagsView'
 
 const tagsViewStore = useTagsViewStore()
-const route = useRoute()
-tagsViewStore.addCachedView(route)
-const cachedViews = computed(() => {
-    return tagsViewStore.cachedViews
-})
 </script>
 
 <style lang="scss" scoped>

src/layout/components/IframeToggle/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <transition-group name="fade-transform" mode="out-in">
+    <inner-link
+      v-for="(item, index) in tagsViewStore.iframeViews"
+      :key="item.path"
+      :iframeId="'iframe' + index"
+      v-show="route.path === item.path"
+      :src="item.meta.link"
+    ></inner-link>
+  </transition-group>
+</template>
+
+<script setup>
+import InnerLink from "../InnerLink/index"
+import useTagsViewStore from '@/store/modules/tagsView'
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore()
+</script>

src/layout/components/InnerLink/index.vue

@@ -1,30 +1,43 @@
-<script>
-export default {
-  setup() {
-    const route = useRoute();
-    const link = route.meta.link;
-    if (link === "") {
-      return "404";
-    }
-    let url = link;
-    const height = document.documentElement.clientHeight - 94.5 + "px";
-    const style = { height: height };
+<template>
+  <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
+    <iframe
+      :id="iframeId"
+      style="width: 100%; height: 100%"
+      :src="src"
+      frameborder="no"
+    ></iframe>
+  </div>
+</template>
 
-    // 返回渲染函数
-    return () =>
-      h(
-        "div",
-        {
-          style: style,
-        },
-        h("iframe", {
-          src: url,
-          frameborder: "no",
-          width: "100%",
-          height: "100%",
-          scrolling: "auto",
-        })
-      );
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: "/"
   },
-};
+  iframeId: {
+    type: String
+  }
+});
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px");
+const loading = ref(false);
+
+onMounted(() => {
+    const { proxy } = getCurrentInstance()
+    const iframeId = ("#" + props.iframeId).replace(/\//g, "\\/");
+    const iframe = document.querySelector(iframeId);
+    // iframe页面loading控制
+    if (iframe.attachEvent) {
+      loading.value = true;
+      iframe.attachEvent("onload", function () {
+        proxy.loading = false;
+      });
+    } else {
+      loading.value = true;
+      iframe.onload = function () {
+        proxy.loading = false;
+      };
+    }
+})
 </script>

src/layout/components/TagsView/index.vue

@@ -141,6 +141,9 @@ function addTags() {
   const { name } = route
   if (name) {
     useTagsViewStore().addView(route)
+    if (route.meta.link) {
+      useTagsViewStore().addIframeView(route);
+    }
   }
   return false
 }
@@ -159,6 +162,9 @@ function moveToCurrentTag() {
 }
 function refreshSelectedTag(view) {
   proxy.$tab.refreshPage(view);
+  if (route.meta.link) {
+    useTagsViewStore().delIframeView(route);
+  }
 }
 function closeSelectedTag(view) {
   proxy.$tab.closePage(view).then(({ visitedViews }) => {