vue 根据点击路由动态生成tab页

<el-tabs v-model="editableTabsValue" type="card" @tab-remove='closeTab' @tab-click='tabClick'>

                <el-tab-pane v-for="(item3,index3) in tab" :key="item3.id" :name="item3.id" :label="item3.lable" :closable="item3.closeable"> </el-tab-pane>

  </el-tabs>

1、点击左侧菜单栏，添加tab

 　　handleItemClick(item){

               let tab=this.tab.find(tab=>Number(tab.id)==item.id);

               if(!tab){

               let data={

                   id:item.id+"",

                   name:item.id,

                   lable:item.name,

                   path:item.path,

                   closeable:true

                    }

               this.tab.push(data)

               }

               this.editableTabsValue=item.id+""

           },

2、关闭某个tab

           closeTab(targetname){

               console.log(targetname)

               let tabs=this.tab;

               let activeitem=this.editableTabsValue

               if(Number(activeitem)==targetname){

                   tabs.forEach((tab,index)=>{

                       if(Number(tab.id)==targetname){

                           let nexttab=tabs[index-1]||tabs[index+1]

                           if(nexttab){

                               console.log(nexttab)

                               activeitem=nexttab.id

                           }

                       }

                   })

               }

                this.editableTabsValue = activeitem+"";

                this.tab=tabs.filter(tab=>tab.id!==targetname.toString())

           }

3、点击生成的tab,跳转到对应的页面

//点击tab切换

           tabClick(tab){

               console.log(tab)

               this.$router.push(`${tab.path}`)

　}

 

注：如果切换页面需要保留缓存，在routerView外层添加<keep-alive>