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

 

posted @ 2019-09-11 23:14  Marksion  阅读(10722)  评论(1编辑  收藏  举报