优化页面内嵌iframe切换tab不刷新问题

src/layout/components/AppMain.vue

@@ -1,20 +0,0 @@
-<template>
-  <el-main class="app-main">
-    <router-view v-slot="{ Component, route }">
-      <transition appear name="fade-transform" mode="out-in">
-        <keep-alive :include="cachedViews">
-          <component :is="Component" :key="route.path" />
-        </keep-alive>
-      </transition>
-    </router-view>
-  </el-main>
-</template>
-<script setup>
-import useTagsViewStore from '@/store/modules/tagsView'
-// const route = useRoute()
-const tagsViewStore = useTagsViewStore()
-// tagsViewStore.addCachedView(route)
-const cachedViews = computed(() => {
-  return tagsViewStore.cachedViews
-})
-</script>

src/layout/components/IframeToggle/index.vue

@@ -0,0 +1,18 @@
+<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,42 @@
-<script>
+<template>
-export default {
+  <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
-  setup() {
+    <iframe :id="iframeId" style="width: 100%; height: 100%" :src="src" frameborder="no"></iframe>
-    const route = useRoute()
+  </div>
-    const link = route.meta.link
+</template>
-    if (link === '') {
-      return '404'
-    }
-    let url = link
-    const height = document.documentElement.clientHeight - 94.5 + 'px'
-    const style = { height: height }
 
-    // 返回渲染函数
+<script setup>
-    return () =>
+const props = defineProps({
-      h(
+  src: {
-        'div',
+    type: String,
-        {
+    default: '/'
-          style: style,
-        },
-        h('iframe', {
-          src: url,
-          frameborder: 'no',
-          width: '100%',
-          height: '100%',
-          scrolling: 'auto',
-        }),
-      )
   },
-}
+  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)
+  console.log('iframe', iframe)
+  if (iframe == null) {
+    return
+  }
+  // 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

@@ -40,7 +40,7 @@ import { getNormalPath } from '@/utils/ruoyi'
 import useTagsViewStore from '@/store/modules/tagsView'
 // import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
-
+import { isHttp } from '@/utils/validate'
 const visible = ref(false)
 const top = ref(0)
 const left = ref(0)
@@ -108,7 +108,7 @@ function filterAffixTags(routes, basePath = '') {
         fullPath: tagPath,
         path: tagPath,
         name: route.name,
-        meta: { ...route.meta },
+        meta: { ...route.meta }
       })
     }
     if (route.children) {
@@ -134,6 +134,10 @@ function addTags() {
   const { name } = route
   if (name) {
     useTagsViewStore().addView(route)
+    if (route.meta.link && isHttp(route.meta.link)) {
+      console.log('add link', route.meta.link)
+      useTagsViewStore().addIframeView(route)
+    }
   }
   return false
 }
@@ -152,7 +156,9 @@ function moveToCurrentTag() {
 }
 function refreshSelectedTag(view) {
   proxy.$tab.refreshPage(view)
-  // In order to make the cached page re-rendered
+  if (route.meta.link) {
+    useTagsViewStore().delIframeView(route)
+  }
 }
 function closeSelectedTag(view) {
   proxy.$tab.closePage(view).then(({ visitedViews }) => {

src/layout/index.vue

@@ -15,10 +15,11 @@
         <router-view v-slot="{ Component, route }">
           <transition name="fade-transform" mode="out-in">
             <keep-alive :include="cachedViews">
-              <component :is="Component" :key="route.path" />
+              <component v-if="!route.meta.link" :is="Component" :key="route.path" />
             </keep-alive>
           </transition>
         </router-view>
+        <iframe-toggle />
       </el-main>
       <el-footer v-if="showFooter">
         <div v-html="defaultSettings.copyright"></div>
@@ -33,7 +34,7 @@ import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { Navbar, Settings, TagsView } from './components'
 import defaultSettings from '@/settings'
-
+import iframeToggle from './components/IframeToggle/index'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import useTagsViewStore from '@/store/modules/tagsView'

src/store/modules/tagsView.js

@@ -1,13 +1,22 @@
 const useTagsViewStore = defineStore('tagsView', {
   state: () => ({
     visitedViews: [],
-    cachedViews: []
+    cachedViews: [],
+    iframeViews: []
   }),
   actions: {
     addView(view) {
       this.addVisitedView(view)
       this.addCachedView(view)
     },
+    addIframeView(view) {
+      if (this.iframeViews.some((v) => v.path === view.path)) return
+      this.iframeViews.push(
+        Object.assign({}, view, {
+          title: view.meta.title || 'no-name'
+        })
+      )
+    },
     addVisitedView(view) {
       if (this.visitedViews.some((v) => v.path === view.path)) return
       this.visitedViews.push(
@@ -40,9 +49,16 @@ const useTagsViewStore = defineStore('tagsView', {
             break
           }
         }
+        this.iframeViews = this.iframeViews.filter((item) => item.path !== view.path)
         resolve([...this.visitedViews])
       })
     },
+    delIframeView(view) {
+      return new Promise((resolve) => {
+        this.iframeViews = this.iframeViews.filter((item) => item.path !== view.path)
+        resolve([...this.iframeViews])
+      })
+    },
     delCachedView(view) {
       return new Promise((resolve) => {
         const index = this.cachedViews.indexOf(view.name)
@@ -65,6 +81,7 @@ const useTagsViewStore = defineStore('tagsView', {
         this.visitedViews = this.visitedViews.filter((v) => {
           return v.meta.affix || v.path === view.path
         })
+        this.iframeViews = this.iframeViews.filter((item) => item.path === view.path)
         resolve([...this.visitedViews])
       })
     },
@@ -93,6 +110,7 @@ const useTagsViewStore = defineStore('tagsView', {
       return new Promise((resolve) => {
         const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
         this.visitedViews = affixTags
+        this.iframeViews = []
         resolve([...this.visitedViews])
       })
     },
@@ -124,6 +142,10 @@ const useTagsViewStore = defineStore('tagsView', {
           if (i > -1) {
             this.cachedViews.splice(i, 1)
           }
+          if (item.meta.link) {
+            const fi = this.iframeViews.findIndex((v) => v.path === item.path)
+            this.iframeViews.splice(fi, 1)
+          }
           return false
         })
         resolve([...this.visitedViews])
@@ -143,6 +165,10 @@ const useTagsViewStore = defineStore('tagsView', {
           if (i > -1) {
             this.cachedViews.splice(i, 1)
           }
+          if (item.meta.link) {
+            const fi = this.iframeViews.findIndex((v) => v.path === item.path)
+            this.iframeViews.splice(fi, 1)
+          }
           return false
         })
         resolve([...this.visitedViews])