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="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 方法可自行补充，此人懒没办法。。。