说到Vue的简单、便捷、高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件;

本章先说选项卡tab控件的嵌入iframe

本次主要解决以下问题:

1.tab控件混合vue-component-view与iframe-view;

2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同;

3.关闭tab中的iframe-view后,将重新打开,不作cache;

问题1:

将 <router-view></router-view> 与 iframe-view 列表 分开渲染

大师兄的案例 中可以学到,tab切换iframe-view不刷新的原理是:渲染iframe列表,并通过匹配当前路由名称 v-show="$route.path === item.path"  控制切换显示

其中一个iframe-view;而router-view列表中,对应的component为空即没有内容显示

P:其中一个 iframe-view

<template>
<iframe width="500px" height="500px" src="http://www.baidu.com"></iframe>
</template>

P: 跳转路由App-view

<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>

问题2:

关键点在于: 不使用默认component 属性,自定义的属性iframeComponent取而代之,手动注入组件,防止挂载组件导致重新渲染刷新;

import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import VueRouter from 'vue-router';
import F1 from './components/f1';
import F2 from './components/f2'; const Index = { template: '<div>Index</div>' }
const routes = [
{
path: '/f1',
name: 'f1',
iframeComponent: F1
},
{
path: '/f2',
name: 'f2',
iframeComponent: F2
},
{
path: '/index',
component: Index,
children: [
{
path: '/f3',
iframe: true
}
]
}
] const router = new VueRouter({
routes // (缩写)相当于 routes: routes
});
Vue.config.productionTip = false Vue.use(VueRouter);
new Vue({
render: h => h(App),
router
}).$mount('#app')

问题3:

当你已经将iframe-view达到keep-alive的效果时,已经成功了一半,却不知关闭tab后,iframe-view的真身还存在,只是v-show=false隐藏而已,再次打开时还是上次的样子,此时显示应该是一个新的tab显示。

解决此问题的关键点是:关闭tab时必须将它从iframe-view列表中移除,再次打开将它加入到列表中, computed过滤出iframe

computed: {
hasOpenComponentsArr() {
return this.$router.options.routes.filter(item => item.iframeComponent);
}
},

add / remove 方法可自行补充,此人懒没办法。。。

vue tab嵌入iframe切换不刷新,相对完整的方案的更多相关文章

  1. 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。

    我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...

  2. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  3. Flutter BottomNavigationBar切换会刷新当前页面解决方

    问题描述 BottomNavigationBar 是flutter 中最常用的UI组建,刚接触时发现在切换tab 的时候,会刷新当前的所有状态,每个页面都会重新刷新.于是乎,在这里先记录下解决方案. ...

  4. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  5. session失效后,登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  6. 响应式嵌入 iframe Pym.js

    Pym.js 可以让你在嵌入 iframe 的时候可自动的对 iframe 的大小进行调整以适应父一层容器,并且可以避免跨域问题. 支持浏览器: Internet Explorer 9, 10 (Wi ...

  7. 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...

  8. Tab页签切换

    js之tab页签切换效果       现在web网站,很多地都需要用到tab页签. 示例:         $(document).ready(function(){               va ...

  9. Google street、Google satellite 、百度地图Iframe切换桥接JS

    1.地图切换方法 注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFun ...

随机推荐

  1. LA服务可用性4个9是什么意思?怎么达到?

    SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...

  2. PX4/Pixhawk uORB

    PX4/Pixhawk的软件体系结构主要被分为四个层次 应用程序的API:这个接口提供给应用程序开发人员,此API旨在尽可能的精简.扁平及隐藏其复杂性 应用程序框架:这是为操作基础飞行控制的默认程序集 ...

  3. java web 监控cpu、内存等。hyperic-sigar

    用到一个插件hyperic-sigar 1:下载hyperic-sigar后解压,把sigar-amd64-winnt.dll(64位机器,32位用sigar-x86-winnt.dll)放到你本机的 ...

  4. nginx日志文件的配置

    文章来源 运维公会: nginx日志文件的配置 1.日志介绍 nginx有两种日志,一种是访问日志,一种是错误日志. 访问日志中记录的是客户端对服务器的所有请求. 错误日志中记录的是在访问过程中,因为 ...

  5. spark coalesce和repartition的区别和使用场景

    区别: repartition底层调用的是coalesce方法,默认shuffle def repartition(numPartitions: Int)(implicit ord: Ordering ...

  6. Linux VPS搭建蚂蚁笔记Leanote私有云笔记存储平台

    一.基础环境LNMP 安装nginx: yum install epel-release -y yum install nginx -y # 启动 nginx systemctl start ngin ...

  7. 开源框架---tensorflow c++ API 运行第一个“手写字的例子”

    #CMakeLists.txt cmake_minimum_required (VERSION ) project (tf_example) set(CMAKE_CXX_FLAGS "${C ...

  8. 6. kafka序列化和反序列化

    https://blog.csdn.net/weixin_33690963/article/details/91698279 kafka序列化: 生产者在将消息传入kafka之前需要将其序列化成byt ...

  9. linux网络编程之简单的线程池实现

    转眼间离15年的春节越来越近了,还有两周的工作时间貌似心已经不在异乡了,期待与家人团聚的日子,当然最后两周也得坚持站好最后一班岗,另外期待的日子往往是心里不能平静的,越是想着过年,反而日子过得越慢,于 ...

  10. Mybatis3.0-[tp_28-29]-映射文件-resultMap_自定义结果集映射规则_及关联环境的搭建

    笔记要点出错分析与总结工程组织 1.定义接口  EmployeeMapperPlus.java package com.dao; import com.bean.*; public interface ...