vue對IFrame內(nèi)嵌web頁面的緩存實現(xiàn)過程

更新時間：2025年04月25日 09:07:50 作者：合肥愛國人士

這篇文章主要介紹了vue對IFrame內(nèi)嵌web頁面的緩存實現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1、需求

現(xiàn)有一個內(nèi)嵌web的頁面，需要解決每次切換時，該頁面展現(xiàn)的還是之前的操作節(jié)點，而不是重新刷新。

2、思路

使用keepAlive

查了下資料，在路由的配置頁面使用keepAlive是可以做到緩存的結(jié)果，但是不符合我的需求，既然提到了，就說一下怎么使用吧。

import { RouteRecordRaw } from 'vue-router';
import { Layout } from '@/router/constant';
import { HomeOutlined } from '@vicons/antd';
import { renderIcon } from '@/utils/index';

/**
 * @param name 路由名稱, 必須設(shè)置,且不能重名
 * @param meta 路由元信息（路由附帶擴展信息）
 * @param redirect 重定向地址, 訪問這個路由時,自定進行重定向
 * @param meta.disabled 禁用整個菜單
 * @param meta.title 菜單名稱
 * @param meta.icon 菜單圖標(biāo)
 * @param meta.keepAlive 緩存該路由
 * @param meta.sort 排序越小越排前
 * */

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'home',
    redirect: '/home/index',
    component: Layout,
    meta: {
      sort: 0,
      isRoot: true,
      activeMenu: 'home_index',
      icon: renderIcon(HomeOutlined),
    },
    children: [
      {
        path: 'index',
        name: `home_index`,
        meta: {
          title: '首頁',
          activeMenu: 'home_index',
          keepAlive: true
        },
        component: () => import('@/views/home/index.vue'),
      },
    ],
  },
];

export default routes;

在特定位置使用keepAlive，結(jié)合路由地址的配置，例如：

<RouterView v-slot="{ Component, route }" >
      <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
      <component v-else :is="Component" />
  </RouterView>

keep-alive標(biāo)簽就是把組件緩存起來，它的原理是把需要緩存的頁面的DOM節(jié)點變成VNode存到內(nèi)存中，下次使用時再將VNode讀取到DOM節(jié)點中實現(xiàn)了緩存，之所以我的web頁面沒辦法使用是因為內(nèi)嵌web頁面使用了IFrame標(biāo)簽，它沒辦法做到這一步。

這里的 keepAliveComponents就是需要緩存頁面的name，這里有個坑需要踩一下，這里的name不是路由配置中的name，而是.vue的name，vue2中有個給組件命名的地方：

export default {
  name: 'HelloWorldComponent',
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};

這里的HelloWorldComponent就是name值，而我使用的是vue3往往會忽略這一個內(nèi)容，所以在測試的時候出現(xiàn)了錯誤，vue3命名方法：

defineOptions({
    name: 'HelloWorldComponent'
})

緩存的vue頁面只有在第一次加載時有onMounted會執(zhí)行，后續(xù)執(zhí)行的是onActivated和onDeactivated方法，keep-alive除了 :include 還有 :exclude 和 :max ，這里的用法不多做敘述。

使用v-show

其實實現(xiàn)方法很簡單，只需要把內(nèi)嵌的web頁面，單獨拿出來，然后使用隱藏就好了，它的原理是我第一次點擊時，加載該頁面，切換其它路由時，我只需要判斷name是否是當(dāng)前路由，將其隱藏起來就行了，它的本質(zhì)是還在，但是沒有達到條件不可見而已：

<template>
  <RouterView v-slot="{ Component, route }" >
    <template v-if="!iframeRoute.some(item => item.name === route.name)">
      <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
      <component v-else :is="Component" />
    </template>
  </RouterView>

  
  <template v-for="item in iframeRoute" :key="item.name">
    <IFrame v-show="item.name === currentRoute.name"  :frameSrc="item.meta.frameSrc" />
  </template>

</template>

這里需要注意，要把IFrame相關(guān)的組件從RouterView中剔除出去，多個IFrame的話就通過 v-for 生成多個就可以了，是不是很簡單呀！

注意：

這里的IFrame 是封裝的組件，不然直接使用可能會出現(xiàn)src沖突，導(dǎo)致多個url共用一個框架，這樣肯定是不行的。