返回顶部
首页 > 资讯 > 精选 >Vue中如何对iframe实现keep alive无刷新
  • 836
分享到

Vue中如何对iframe实现keep alive无刷新

2023-07-04 13:07:08 836人浏览 薄情痞子
摘要

今天小编给大家分享一下Vue中如何对iframe实现keep alive无刷新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

今天小编给大家分享一下Vue中如何对iframe实现keep alive无刷新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

Vue的keep-alive原理

要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 Vnode (在内存里),在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。 另外 ,我也尝试有过想法:如果把整个iframe节点保存起来,然后需要切换时把它渲染到目标节点上,能否实现iframe页不被刷新呢?————也是不可行的,iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的。

实现的思路

既然保持iframe页里的状态很难实现,在这个时候我想到了一个别的方法。能否在Vue的route-view节点上动点手脚?使得在切换 非iframe页 的时候使用Vue的路由,当切换 iframe页 时则使用 v-show 切换显示与隐藏,使得iframe节点 一直不被删除 ,这样就能保持iframe的状态了。

我们简陋的实现一下以上的效果,上代码:

入口main.js:

import Vue from 'vue/dist/vue.js'import App from './App.vue'import VueRouter from 'vue-router';const Index = { template: '<div>Index</div>' }const routes = [ // 含有iframe的两个页面 { path: '/f1', name: 'f1' }, // 含有iframe的两个页面 { path: '/f2', name: 'f2' }, { path: '/index', component: Index }]const router = new VueRouter({ routes});Vue.use(VueRouter);new Vue({ render: h => h(App), router}).$mount('#app')

根组件:

<template> <div id="app"> <div class="nav">  <router-link class="router" to="/f1">Go to F1</router-link>  <router-link class="router" to="/f2">Go to F2</router-link>  <router-link class="router" to="/index">Go to Index</router-link> </div>  <keep-alive>  <!-- Vue的路由 -->  <router-view></router-view> </keep-alive>  <!-- iframe页面 --> <f1 v-show="$route.path == '/f1'"></f1> <f2 v-show="$route.path == '/f2'"></f2> </div></template><script>import F1 from './components/f1';import F2 from './components/f2';export default { name: 'app', components: { F1, F2 }, }</script>

上面代码简单来说,关键的地方首先是main.js初始化路由时,对iframe页不填写属性component,这样页面就是空白的。然后在 router-view 节点旁边渲染iframe页组件,使用$route.path判断当前路由的指向,控制iframe页的 显示与隐藏 。

上面代码简单的解决了问题,但还有一些地方可以优化

  1. iframe页在根节点App.vue一渲染时 已经渲染 了,对此iframe页可以做成 懒加载 ,只有在进入过相应页面了触发渲染,并且渲染过之后就用v-show切换显示与隐藏

  2. 每当增加一个iframe页都要增加一段的组件引入注册和调用的代码。比较 繁琐 。我们目标应该做到每增加一个iframe页,只需要添加尽量少的代码。这里思路是:

    1. 在路由配置中定义一个属性,用于 标识该页面是否含有iframe 的页面

    2. 根据标识,iframe页组件 自动动态注册和渲染 ,无需再手写额外的代码

    3. router-view和iframe切换的逻辑封装成 新组件 ,用它 替代原有的router-view

我们先修改router的配置,增加一个属性名iframeComponent,用于标识是否包含iframe,该属性的值是组件文件引用

main.js:

import F1 from './components/f1';import F2 from './components/f2';const routes = [ { path: '/f1', name: 'f1', iframeComponent: F1 // 用于标识是否含有iframe页 }, { path: '/f2', name: 'f2', iframeComponent: F2 // 用于标识是否含有iframe页 }, { path: '/index', component: { template: '<div>Index</div>' } }]const router = new VueRouter({ routes // (缩写)相当于 routes: routes});new Vue({ render: h => h(App), router}).$mount('#app')

接下来我们第二步和第三步结合在一起,封装新的组件iframe-router-view.vue:

<template> <div>  <!-- Vue的router-view -->  <keep-alive>   <router-view></router-view>  </keep-alive>  <!-- iframe页 -->  <component   v-for="item in hasOpenComponentsArr"   :key="item.name"   :is="item.name"   v-show="$route.path === item.path"  ></component> </div></template><script>import Vue from 'vue/dist/vue.js'export default { created() {  // 设置iframe页的数组对象  const componentsArr = this.getComponentsArr();  componentsArr.forEach((item) => {   Vue.component(item.name, item.component);  });  this.componentsArr = componentsArr;  // 判断当前路由是否iframe页  this.isOpenIframePage(); }, data() {  return {   componentsArr: [] // 含有iframe的页面  } }, watch: {  $route() {   // 判断当前路由是否iframe页   this.isOpenIframePage();  } }, computed: {  // 实现懒加载,只渲染已经打开过(hasOpen:true)的iframe页  hasOpenComponentsArr() {   return this.componentsArr.filter(item => item.hasOpen);  } }, methods: {  // 根据当前路由设置hasOpen  isOpenIframePage() {   const target = this.componentsArr.find(item => {    return item.path === this.$route.path   });   if (target && !target.hasOpen) {    target.hasOpen = true;   }  },  // 遍历路由的所有页面,把含有iframeComponent标识的收集起来  getComponentsArr() {   const router = this.$router;   const routes = router.options.routes;   const iframeArr = routes.filter(item => item.iframeComponent);      return iframeArr.map((item) => {    const name = item.name || item.path.replace('/', '');    return {     name: name,     path: item.path,     hasOpen: false, // 是否打开过,默认false     component: item.iframeComponent // 组件文件的引用    };   });  } }}</script>
  1. 该组件主要做的是根据main.ja里的routes生成一个只含有iframe页的数组对象。

  2. watch上监听$route,判断当前页面在iframe页列表里的话就设置hasOpen属性为true,渲染该组件

  3. 用v-show="$route.path === item.path"切换iframe页的显示与隐藏。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的javascript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的htmlCSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

以上就是“Vue中如何对iframe实现keep alive无刷新”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。

--结束END--

本文标题: Vue中如何对iframe实现keep alive无刷新

本文链接: https://www.lsjlt.com/news/345354.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中如何对iframe实现keep alive无刷新
    今天小编给大家分享一下Vue中如何对iframe实现keep alive无刷新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2023-07-04
  • Vue中对iframe实现keep alive无刷新的示例分析
    这篇文章主要介绍Vue中对iframe实现keep alive无刷新的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue的keep-alive原理要实现对保持iframe页...
    99+
    2024-04-02
  • vue中keep-alive如何实现列表页缓存
    小编给大家分享一下vue中keep-alive如何实现列表页缓存,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!需求:商品列表页面...
    99+
    2024-04-02
  • Vue中的keep-alive如何使用
    本篇内容介绍了“Vue中的keep-alive如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!keep-alive 是 Vue 的内置...
    99+
    2023-07-05
  • vue的keep-alive中如何使用EventBus
    这篇文章主要介绍了vue的keep-alive中如何使用EventBus,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.keep-aliv...
    99+
    2024-04-02
  • 如何解决vue中keep-alive缓存问题
    这篇文章将为大家详细讲解有关如何解决vue中keep-alive缓存问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue开发的时候,我们经常会有这样的需求:开发一个详...
    99+
    2024-04-02
  • vue3如何使用keep alive实现前进更新后退销毁
    这篇文章主要讲解了“vue3如何使用keep alive实现前进更新后退销毁”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3如何使用keep alive实现前进更新...
    99+
    2023-06-30
  • vue中如何实现页面刷新以及局部刷新
    vue中如何实现页面刷新以及局部刷新,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一.全页面刷新修改 App.vue,代码如下:<template> &n...
    99+
    2023-06-26
  • vue中keep-alive组件实现多级嵌套路由的缓存
    目录现状(问题):探索方案:实现方式现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1、直接将路由扁平化配置,都放在一级或二级路由中方案...
    99+
    2024-04-02
  • 如何实现无感刷新token
    目录1、需求方法一方法二方法三2、实现3、问题解决问题一:如何防止多次刷新token问题二:同时发起两个或者两个以上的请求时,其他接口怎么解决前言: 最近在做需求的时候,涉及到登录t...
    99+
    2024-04-02
  • ajax如何实现无刷新分页
    这篇文章主要介绍ajax如何实现无刷新分页,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变...
    99+
    2024-04-02
  • Ajax如何实现无刷新登录
    这篇文章主要为大家展示了“Ajax如何实现无刷新登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现无刷新登录”这篇文章吧。先建一个Login.h...
    99+
    2024-04-02
  • vue如何实现关闭对话框后刷新列表
    目录关闭对话框后刷新列表父窗口代码子窗口代码关闭打开的窗口后刷新父页面解决办法关闭对话框后刷新列表 有些场景需要实现用户弹窗确定后自动刷新列表,父窗口绑定fevent即可 父窗口代码...
    99+
    2024-04-02
  • HTML5中History API如何实现无刷新跳转
    这篇文章将为大家详细讲解有关HTML5中History API如何实现无刷新跳转 ,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。有一次在上**网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页...
    99+
    2023-06-09
  • 如何实现类似facebook无刷新ajax更新
    这篇文章主要介绍了如何实现类似facebook无刷新ajax更新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 ...
    99+
    2024-04-02
  • vue如何实现原生下拉刷新
    这篇文章给大家分享的是有关vue如何实现原生下拉刷新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 文字样式html代码<template>  <div class=&quo...
    99+
    2023-06-29
  • 如何实现Ajax无刷新分页效果
    这篇文章给大家分享的是有关如何实现Ajax无刷新分页效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Ajax无刷新分页效果,如下代码实现<!doctype ht...
    99+
    2024-04-02
  • ajax如何实现无刷新评论功能
    小编给大家分享一下ajax如何实现无刷新评论功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!这是留言板的界面,当用户点击提交留...
    99+
    2024-04-02
  • AJAX如何实现RSS无刷新聚合器
    这篇文章主要介绍AJAX如何实现RSS无刷新聚合器,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! rss.js代码如下:<!-- //控制ID fu...
    99+
    2024-04-02
  • Vue如何实现页面的局部刷新
    本篇文章给大家分享的是有关Vue如何实现页面的局部刷新,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。利用Vue里面的provide+inject组合首先需要修改App.vue。...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作