说到Vue的简单、便捷、高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件;
本章先说选项卡tab控件的嵌入iframe。
本次主要解决以下问题:
1.tab控件混合vue-component-view与iframe-view;
2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同;
3.关闭tab中的iframe-view后,将重新打开,不作cache;
问题1:
将 与 iframe-view 列表 分开渲染
从 大师兄的案例 中可以学到,tab切换iframe-view不刷新的原理是:渲染iframe列表,并通过匹配当前路由名称 v-show="$route.path === item.path" 控制切换显示
其中一个iframe-view;而router-view列表中,对应的component为空即没有内容显示
P:其中一个 iframe-view
P: 跳转路由App-view
>
问题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: '
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= newVueRouter({
routes//(缩写)相当于 routes: routes
});
Vue.config.productionTip= falseVue.use(VueRouter);newVue({
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 方法可自行补充,此人懒没办法。。。