中国建设工程招聘信息网站,电商运营方案,营销型网站建设调查表,如何做网站导航最近做了个项目#xff0c;其中有个页面是由 iframe 嵌套了一个另外的页面#xff0c;在运行的过程中发现 KeepAlive 并不生效#xff0c;每次切换路由都会触发 iframe 页面的重新渲染#xff0c;代码如下#xff1a; router-view v-slot{ Component }其中有个页面是由 iframe 嵌套了一个另外的页面在运行的过程中发现 KeepAlive 并不生效每次切换路由都会触发 iframe 页面的重新渲染代码如下 router-view v-slot{ Component }keep-alive :includekeepAliveListcomponent :isComponent/component/keep-alive/router-view看起来并没有什么问题并且其他非 iframe 实现的页面都是可以被缓存的因此可以推断问题出在 iframe 的实现上。
我们先了解下 KeepAlive
KeepAlive 熟悉的可跳过本节
被 KeepAlive 包裹的组件不是真的卸载而是从原来的容器搬运到另外一个隐藏容器中实现“假卸载” 当被搬运的容器需要再次挂载时应该把组件从隐藏容器再搬运到原容器这个过程对应到组件的生命周期就是 activated 和 deactivated。
keepAlive 是需要渲染器支持的在执行 mountComponent 时如果发现是 __isKeepAlive 组件那么会在上下文注入 move 方法。
function mountComponent(vnode, container, anchor) {/**... */const instance {/** ... */state,props: shallowReactive(props),// KeepAlive 实例独有keepAliveCtx: null};const isKeepAlive vnode.__isKeepAlive;if (isKeepAlive) {instance.keepAliveCtx {move(vnode, container, anchor) {insert(vnode.component.subTree.el, container, anchor);},createElement};}
}原因
通过上面的了解我们知道KeepAlive 缓存的是 vnode 节点vnode 上面会有对应的真实DOM。组件“销毁”时会将真实 DOM 移动到“隐藏容器”中组件重新“渲染”时会从 vnode 上取到真实 DOM再重新插入到页面中。这样对普通元素是没有影响的但是 iframe 很特别当其插入到页面时会重新加载这是浏览器特性与 Vue 无关。
解决方案
思路路由第一次加载时将 iframe 渲染到页面中路由切换时通过 v-show 改变显/隐。
在路由注册时将 component 赋值为一个空组件 {path: /chathub,name: chathub,component: { render() {} }, // 这里写 null 时控制台会出 warning提示缺少 render 函数},在 router-view 处渲染 iframe通过 v-show 来控制显示隐藏 ChatHub v-ifchatHubVisited v-showisChatHubPage/ChatHubrouter-view v-slot{ Component }keep-alive :includekeepAliveListcomponent :isComponent/component/keep-alive/router-view监听路由的变化改变 iframe 的显/隐 const isChatHubPage ref(false)
// 这里是个优化想的是只有页面访问过该路由才渲染没访问过就不渲染该组件
const chatHubVisited ref(false) watch(() routes.path,(value) {if (value /chathub) {chatHubVisited.value trueisChatHubPage.value true} else {isChatHubPage.value false}},{immediate: true}
)ChatHub.vue组件代码有单个或者多个iframe情况 templatediv classiframe-containeriframev-for(item, index) in iframeListv-showshowIframe(item, index):keyitem.url:srcitem.urlframeborder0/iframe/div
/template
script langts setup
export default {name: ChatHub,
};
import { ref, reactive } from vue;
import { useRoute, useRouter } from vue-router;
const route useRoute();const iframeList reactive([{name: 1, url: https://xxx},{name: 2, url: https://yyy}
])// 是否显示
const showIframe (item, index) {if (route.query.url item.url) {return true;} else {return false;}
};/script
