vue tab嵌入iframe切换不刷新，相对完整的方案

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