vue路由+Tab组件实现多tab功能
时间:2023-03-28 16:35:02
HTML
vue单页应用中,点击导航菜单时,会切换路由。一般对应路由的页面组件直接显示在中间的router-view路由视图中,所以本篇小编就来介绍一下如何使用vue路由和tab组件实现多页面功能。当打开一个新的菜单路由时,会弹出一个新的标签页,你可以随时切换到上一个页面并保持之前的组件状态。当前打开的标签需要在data(openTab)中维护为一个数组,默认显示首页main.vue:openTab:[{title:"Homepage",name:"/Index",//routingclosable:false,//首页不能关闭componentName:"index"//组件名用于keepalive缓存}],componentName为对应tab中页面组件的name值,所以每个组件都要设置自己的name价值。让我们看看模板是如何实现的。首先添加elementUI的tab组件:@tab-click="clickTab">i.componentName)">
注意router-view没有放在el-tab-窗格中,是画在外面的,tab共享这个view,因为如果你多次尝试使用,就会出现元素id属性在使用keep-alive缓存组件的状态时可能会出现同样的问题。可以使用include存储当前tab的组件名列表,实现tab视图的缓存,这样切换时不需要重新加载组件,但要特别注意组件名的唯一性。removeTab被删除时,遍历找到对应的tab,然后将当前激活的activeIndex设置为当前tab的下一个或上一个方法:removeTab(target){//删除当前选中的页面if(this.activeIndex===target){this.openTab.forEach((item,index)=>{if(item.name==target){让nextTab=item[index+1]||item[index-1];if(nextTab){这个.activeIndex=nextTab.name;}}});}变种我=0;this.openTab.forEach((item,index)=>{if(item.name==target){return(i=index);}});this.openTab.splice(i,1);//更新路由this.$router.push({path:this.openTab[this.openTab.length-1].name});},clickTab(tab){this.activeIndex=tab.paneName;this.$router.push({path:this.activeIndex});},watch:{$route(to,form){//路由更新时的Tab切换varflag=false;//当前页面的菜单是打开的,直接切换到它if(this.openTab){for(leti=0;i