vue tab标签页切换路由 导航标签页增删(类浏览器)

一个需求：

左侧导航点击切换路由，同时增加标签页，标签页点击同跳转路由(可增删)

主页

<template>
  <div class="main">
    <el-container>
        <el-aside style="width: 216px">
        <div class="left">
        <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-user-solid"></i><span>个人</span>
                </template>
            <el-menu-item index="/111" v-on:click="addTab('111','/222')">111</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-video-camera-solid"></i><span>管理</span>
                </template>
                <el-menu-item index="/222" v-on:click="addTab('222','/222')">222</el-menu-item>
                <el-menu-item index="/333" v-on:click="addTab('333','/333')">333</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-camera-solid"></i><span>监控</span>
                </template>
                <el-menu-item index="/444" v-on:click="addTab('444','/444')">444</el-menu-item>             
                <el-menu-item index="/555" v-on:click="addTab('555','/555')">555</el-menu-item>
            </el-submenu>
            </el-menu>
        </div>
        </el-aside>
        <el-container>
            <el-header>
            </el-header>
            <el-tabs v-model="editableTabsValue" type="card"  closable @tab-remove="removeTab" @tab-click="handleClick">
                <el-tab-pane><span slot="label"><i class="el-icon-s-home"></i></span></el-tab-pane>
                <el-tab-pane :key="index" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name"></el-tab-pane>
            </el-tabs>
            <router-view />
        </el-container>
    </el-container>
</div>
</template>

路由

{
      path: '/',
      name: 'index',
      component: index,
      children:[
        {
          path:'/111',
          name: '111',
          component: 111
        },
        {
          path:'/222',
          name: '222',
          component: 222
        },
        {
          path:'/333',
          name: '333',
          component: 333
        },
        {
          path:'/444',
          name: '444',
          component: 444
        },
      ]
}

js

<script>
export default {
  name: "index",
  data() {
    return {
      text: "",
      editableTabsValue: "1",  //当前tab页值
      tabIndex:'1',
      tabArr:[],  //已显示的tab页name数组，判断添加删除用
      editableTabs: [] //标签页内容数组
    };
  },
 created() {},
 methods: {
    // tabs标签页切换事件
    handleClick(tab, event) {
      var router=event.srcElement.id.substring(4) //取到切换事件返回的tab页name，就是路由
      this.$router.push(router)  //tab切换路由
    },
    //点击左侧导航增加tab页
    addTab(targetName,router) {
    	let newTabName = router;
       	var index= this.tabArr.indexOf(newTabName );  //没添加过就添加
        if(index==-1){ 
          this.tabArr.push(newTabName )
          this.editableTabs.push({
            title: targetName,
            name: newTabName,
            content: 'New Tab content',
            router:router,
          });
        }
        this.editableTabsValue = newTabName;
      },
    //删除tab标签页
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];  //删除后的下一个标签页
              var index = this.tabArr.indexOf(targetName) //在标签页数组里删除
              this.tabArr.splice(index, 1);
              if (nextTab) {  
                activeName = nextTab.name;
                this.$router.push(nextTab.router); //路由也跳转
              }
            }
          });
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
  },
};
</script>