vue页面和 iframe多页面无刷新方案和并行存在解决方案

面临问题 : back的后台以jsp嵌套iframe为主, 所以在前端框架要把iframe无刷新嵌套和vue页面进行并行使用,vue的keep-alive只能对虚拟dom树 vtree 进行缓存无法缓存iframe,所以要对iframe进行处理

tab标签的切换效果具体参考若依框架的tab切换,可以去若依看源码,若依源码没有实现这个效果,以下代码基于若依源码进行优化

一开始打算把每个iframe嵌入到router页面里面,但这样会导致几十个iframe页面全部占用内存,用v-show显示,所以要做成点击的才会占有内存

实现效果

  1. 每个iframe页面有单独的路由
复制代码
   刷新页面可以对当前iframe页面进行刷新
复制代码
   vue 页面未缓存和缓存和iframe页面3者进行并行存在,并且达到效果
复制代码
   刷新标签可以对iframe页面进行刷新
复制代码
   点击才会占用内存

解决方案 采用iframe和keeplive分开的方案,用v-show进行判断,把每个iframe嵌入到router里的/frame/: 的动态路由里面,用户点击iiframe的菜单就会生成一个 /iframe/brand-list的页面,页面根据逻辑去找到对应iframe去生成tab,并且建立内存资源达到切换tab不刷新的效果 以下为实现效果 *
最终实现效果,5个页面切换 无感刷新,并且iframe动态引入

js 复制代码
iframe路由页面
//iframe 路由
const commonPath = import.meta.env.VITE_APP_PATH || 'g-back'

getIframeList(){
    return[
      {
        fullPath:`${commonPath}/iframe/brand-list`,
        path:`${commonPath}/iframe/brand-list`,
        // name:"brand-list",
        meta:{
          title:"品牌维护",
          link:'baidu.com',
        }
      },
      {
        fullPath:`${commonPath}/iframe/brand-list`,
        path:`${commonPath}/iframe/category-goodsType`,
        // name:"category-goodsType",
        meta:{
          title:"品牌分类",
          link:'baidu.com',

        }
      },
      {
        fullPath:`${commonPath}/iframe/brand-list`,
        path:`${commonPath}/iframe/standard-list`,
        // name:"standard-list",
        meta:{
          title:"商品标准",
          link:'baidu.com',

        }
      }
    ]
  }




router.js页面 vue路由
const remainingRouter: AppRouteRecordRaw[] = [
  {
    path: `/`,
    redirect: '/g-back/index',
  },
  {
    path: '/g-back',
    redirect: '/g-back/index',
    children: [
      {
        path: '/g-back/index',
        component: () => import('@/views/home/index.vue'),
        name: 'index',
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  },
  {
    path: '/404',
    component: () => import('@/views/404/index.vue'),
    name: '404',
    meta: { title: '404', icon: 'dashboard'}
  },
  {
    path: `${commonPath}/iframe/:id`,
    component: () => import('@/views/iframe/index.vue'),
    meta: {
      title: 'iframe',
      link:true
    }
  },
  {
    path: '/redirect',
    // hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index.vue')
      }
    ]
  }
]
以上 所有的iframe页面都存在/iframe/:id 中 ,用动态路由展示iframe的页面 
以上 brand-list 就是品牌维护的页面路由
App.vue页面
<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="routes.path" v-if="!routes.meta.link">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component v-if="!route.meta.link" :is="Component"  />
        </keep-alive>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

<script setup>
import iframeToggle from "../IframeToggle/index.vue";
import useTagsViewStore from "@/store/modules/tagsView";
const routes = useRoute()
watch(routes,(val)=>{
  console.log(val)
})
const tagsViewStore = useTagsViewStore();
</script>
注意一定要给router-view key值,以实现每个iframe页面的变化,router-view都会改变它的路由
iframeToggle页面
<template>
    <inner-link
    v-for="(item, index) in uniqBy(iframeViews,'path')"
    :key="item.path"
    :iframeId="'iframe' + index"
    v-show="route.path === item.path"
    :src="iframeUrl(item.meta.link, item.query)"
  ></inner-link>
</template>

<script setup>
import InnerLink from "../InnerLink/index.vue";
import useTagsViewStore from "@/store/modules/tagsView";
import { uniqBy } from 'lodash'

const route = useRoute();
const tagsViewStore = useTagsViewStore();
const iframeViews = computed(()=>tagsViewStore.iframeViews)

// console.log(iframeViews.value)
function iframeUrl(url, query) {
  // if (Object.keys(query).length > 0) {
  //   let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
  //   return url + "?" + params;
  // }
  return url;
}
</script>
InnerLink页面
<template>
  <div v-loading="loading" :style="'height:' + height">
    <iframe
      :id="iframeId"
      style="width: 100%; height: 100%"
      :src="src"
      frameborder="no"
    ></iframe>
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    default: "/"
  },
  iframeId: {
    type: String
  }
});
const loading = ref(true)
const height = ref(document.documentElement.clientHeight - 94.5 + "px;")

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 300);
  window.onresize = function temp() {
    height.value = document.documentElement.clientHeight - 94.5 + "px;";
  };
})
</script>
相关推荐
蜚鸣3 天前
Vue的快速入门
vue
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac5 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐5 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞5 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52146 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手7 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO7 天前
分类别柱状图(Vue3)
typescript·vue·echarts