Vue elementUI使用tabs与导航栏联动

不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件
在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去

<template>
   <div id='v_slider'>
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> -->
        <el-menu :default-openeds='["200","3","4","5","6","2020082116471091274"]' router class="el-menu-vertical-demo" id="QWE"  :unique-opened='isunique' :collapse="isCollapse" @select="handleSelect">        
            <el-submenu v-for='first in menuData' :index='first.menu_id' :key='first.menu_id'>
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{first.menu_name}}</span>
                </template>
                <template v-if="isSubmenu">
                    <el-submenu v-for='second in first.children' :index='second.menu_url' :key='second.menu_id'>
                        <span slot="title">{{second.menu_name}}</span>
                        <el-menu-item v-for='third in second.children'  :index='third.menu_url' :key='third.menu_id'>{{third.menu_name}}</el-menu-item> 
                    </el-submenu> 
                </template>  
                <template v-else>
                     <el-menu-item v-for='second in first.children'  :index='second.menu_url' :key='second.menu_id'>{{second.menu_name}}</el-menu-item> 
                </template>  

            </el-submenu>
        </el-menu> 
        <div class="box"><i :class="iconClass" @click="hide"></i></div>                  
   </div>     
</template>
<script>
export default {
    name:'v_slider',
    data(){
        return {

            iconClass:'el-icon-d-arrow-left',
            isSHow:true,
            isCollapse: true,
            isunique: true,
            isSubmenu:false,
            menuData: [],
            treeMenu:[]
        }
    },
    mounted() {
        this.InitSecondMenu();
    },
    methods: {
        InitSecondMenu(){
            var self=this;
            var Enumerable = require('linq');
            var data=JSON.parse(sessionStorage.getItem('menuData'));
            var menuData_cache=JSON.parse(sessionStorage.getItem('menuData'));
            if (!(typeof menuData_cache == "string" && JSON.parse(menuData_cache) != null)) {
                this.$http({
                    method: 'GET',
                    url: this.api+'/api/Yw_Sys_Menu/GetMainMenu?usrId='+sessionStorage.getItem("currentUserId")
                }).then(res => {
                    if(res.status==200){
                        sessionStorage.setItem("menuData",JSON.stringify(res.data.data));
                        data=JSON.parse(sessionStorage.getItem('menuData'));
                        var first=Enumerable.from(data).where("p=>p.menu_level==1").toArray();//一级菜单
                        var second=Enumerable.from(data).where("p=>p.menu_level==2").toArray();//二级菜单
                        var third=Enumerable.from(data).where("p=>p.menu_level==3").toArray();//三级菜单
                        third.forEach(second => {
                            second.children=Enumerable.from(data).where("p=>p.menu_pid=="+second.menu_id +"&p.menu_type==1").orderBy("p=>p.menu_order").toArray();//将三级菜单挂载在二级菜单下
                        });
                        second.forEach(first => {
                            first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id +"&p.menu_type==1").orderBy("p=>p.menu_order").toArray();//将二级菜单挂载在一级菜单下
                        });
                        first.forEach(first => {
                            first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id +"&p.menu_type==1").orderBy("p=>p.menu_order").toArray();//将一级菜单挂载在this.menuData下
                        });
                        self.treeMenu=first;
                        // self.menuData=Enumerable.from(first).where("p=>p.menu_id=='200'").toArray();
                        self.isCollapse=false;
                        sessionStorage.setItem("treeMenuData",JSON.stringify(self.treeMenu));
                        self.showMenu({param:["200"]});//200代表第一个运维管理菜单
                    }
                }).catch(error => {
                    console.log(error);
                });
            }else{
                var first=Enumerable.from(data).where("p=>p.menu_level==1").toArray();//一级菜单
                var second=Enumerable.from(data).where("p=>p.menu_level==2").toArray();//二级菜单
                var third=Enumerable.from(data).where("p=>p.menu_level==3").toArray();//三级菜单
                third.forEach(second => {
                    second.children=Enumerable.from(data).where("p=>p.menu_pid=="+second.menu_id).orderBy("p=>p.menu_order").toArray();//将三级菜单挂载在二级菜单下
                });
                second.forEach(first => {
                    first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id).orderBy("p=>p.menu_order").toArray();//将二级菜单挂载在一级菜单下
                });
                first.forEach(first => {
                    first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id).orderBy("p=>p.menu_order").toArray();//将一级菜单挂载在this.menuData下
                });
                this.treeMenu=first;
                this.menuData=Enumerable.from(first).where("p=>p.menu_id==1").toArray();
                this.isCollapse=false;
                this.showMenu({param:["200"]});//200代表第一个运维管理菜单
            }
            
        },
        showMenu(obj){
            var self=this;
            var Enumerable = require('linq');
            this.menuData=Enumerable.from(this.treeMenu).where("p=>p.menu_id=="+obj.param[0]).orderBy("x=>x.menu_order").toArray();
            this.menuData.forEach(item=>{
                item.children.forEach(i=>{
                    if(i.children!=null&&i.children.length>0){
                        self.isSubmenu=true;return;
                    }else{
                        self.isSubmenu=false;return;
                    }
                })
            })
            this.isCollapse=false;
        },
        handleSelect(key, keyPath) {//子组件的方法名，随便取
            this.$router.options.routes.forEach(item => {//遍历全局所有路由。并找到当前路由信息并跳转该路由。
                if(item.path==key){
                    this.$emit('parentFn',{param:item.name});
                    return;
                }
            });
        },
        hide(){
            this.isSHow=!this.isSHow;
            var aside=document.querySelector('.el-aside');
            if(!this.isSHow){
                this.iconClass='el-icon-d-arrow-right';
                aside.style.width="20px";
                this.isCollapse=true;
            }else{
                this.iconClass='el-icon-d-arrow-left';
                aside.style.width="250px";
                 this.isCollapse=false;
            }
            
        }
    },
    components: {

    }
}
</script>
<style scoped>
#v_slider{position: relative;}
  /* #slider{height: cacl(100% - 60px);background: #ccc;} */
.el-menu-vertical-demo:not(.el-menu--collapse) {box-sizing:border-box;width: 249px;min-height: 400px;}
.el-menu {text-align: left;}
.el-menu-item{padding-left: 80px !important;}
.box:hover i{background: #fff;color:lightskyblue;}
.box{font-size:20px;color:darkslateblue;background:#fff;position:absolute;right: 0px;top: calc(50vh - 70px);z-index: 9;}

</style>

将slider和tabs包在index里面，通过index传递兄弟组件通信。

或者eventBus也可以。

import bus from '../common/bus';
methods: {
    addTab(key,keyPath) {
        console.log(key,keyPath)
        bus.$emit('navPath',keyPath)
    }
},

<template>
  <div id="v_Index">
    <el-container style="height: 100%;">
        <el-header>
            <rate-header @parentFn="openSlider"></rate-header>
        </el-header>
        <el-container>
            <el-aside width="auto" style="border-right: 1px solid #dcd8d8;max-width:250px;">
                <rate-aside @parentFn="appendToTabs" ref="slider"></rate-aside>
            </el-aside>
            <el-main>
                <rateContentmain ref="tab"></rateContentmain>
            </el-main>
            <!-- <el-aside width="250px" style="border-right: 1px solid #dcd8d8;">
                
            </el-aside> -->
        </el-container>
    </el-container>
  </div>
</template>

<script>
  import rateHeader from './layout/header'
  import rateAside from './layout/slider'
  import rateContentmain from './layout/contentMain'

  import Oidc from "oidc-client";
  var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/CallBack",
    response_type: "id_token token",
    scope: "openid profile api1",
    post_logout_redirect_uri: "http://localhost:5003/"
  };
  var mgr = new Oidc.UserManager(config);

  export default {
    name: 'v_Index',
    data() {
      return {
        
      };
    },
    beforeCreate(){

    },
    mounted() {
      var that=this;
      mgr.getUser().then(function(user) {
        if (user) {
          // this.res = ("User logged in", user.profile);
          that.res = ("User logged in", user.profile);
        } else {
          that.res = ("User not logged in");
        }
      });
    },
    methods: {
        openSlider(obj){
            this.$refs.slider.showMenu(obj);
        },
        appendToTabs({param}){
            //console.log('参数',param)
            this.$refs.tab.addTab({param});
        },
 
    },
    components: {
      rateHeader,rateAside,rateContentmain
    }

  }
</script>

<style scoped>
#v_Index{height: 100%;}
.el-main{padding: 0;}
section:nth-child(1){height: 100%;}
section:nth-child(2){height: 100%}
.el-header, .el-footer {background-color:#062d91;color: #fff;line-height: 60px;}
.el-aside,.el-main {background-color: #fff;text-align: center;height: 100%;}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{width: 7px;height: 7px;background-color: #F5F5F5;}
  /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}
  /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);background-color: #c8c8c8;}



</style>

在tabs.vue中接收

<template>
    <div id="v_Tabs">
        <el-tabs v-model="editableTabsValue"  type="card"  @tab-remove="removeTab" @tab-click="linkRouter">
          <el-tab-pane
              v-for="(item) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              :closable="item.close"
          >
              <!-- 首页高德地图组件 -->
              <!-- <Map style="border-radius: 1px;margin: -15px 10px 0px 10px;" ></Map> -->
              <component @jump='addTab' :is="item.component"></component>
              
              <!-- 二级路由 显示home路由下的子路由视图 如果路由名称和当前页面的名称不对应则不显示。-->
              <router-view @jump='addTab' @closeCurrentPage='removeTab'></router-view>
          </el-tab-pane>
        </el-tabs>
    </div>
    
</template>
<script>
  import map from '../pages/common/map'
  
  export default {
    name: 'v_Tabs',
    data() {
      return {
        editableTabsValue: '1',
        editableTabs: [{
          title: '首页',
          name: '1',
          content: '',
          component:map,
        }],
        tabIndex: 1
      }
    },
    mounted(){
      //console.log(this.$route);//路由信息
    },
    computed: {
      
    },
    methods: {
      jump(obj){
        this.$router.push({ path: '/index/ywUnit' });
      },
      addTab(targetName) {
        if(targetName.isjump){
           this.$router.push({ path: targetName.path});
        }
        var exist = false;
        for (var i = 0; i < this.editableTabs.length; i++) {
          if (targetName.param === this.editableTabs[i].title) {
            exist = true;
            // this.editableTabsValue=i;
            this.editableTabsValue=this.editableTabs[i].name;
            return;
          }
        }
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: targetName.param,
          name: newTabName,
          content: targetName.param,
          editable:'',
          close:'closable'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        if(typeof targetName =="string" && targetName.length>=4){}
        this.editableTabs.forEach(item => {
            if(item.title===targetName){targetName=item.name;}
        });
        let tabs = this.editableTabs;
        var editTabTile="";
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                editTabTile=nextTab.title;
                activeName = nextTab.name;
              }
            }
          });
        }
        // this.$router.go(-1);
        this.$router.options.routes.forEach(item => {//遍历全局所有路由。并找到当前路由信息并跳转该路由。
        // this.$alert(item.name);
        // this.$alert(editTabTile);
            if(item.name==editTabTile){
                this.$router.push({ path: item.path });
                return;
            }else{
              // this.$router.push({ path: "http://localhost:8080/#/sys_usr" });
            }
        });
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      //跳转路由并且设置当前活跃的标签
      linkRouter(currentTab) {
        this.$router.options.routes.forEach(item => {//遍历全局所有路由。并找到当前路由信息并跳转该路由。
            if(item.name==currentTab.label){
                this.$router.push({ path: item.path });
                return;
            }
        });
        // this.editableTabsValue = currentTab.name;
      }
    },
    components:{
       
    }

  }
</script>
<style scoped>
/* #v_Tabs[data-v-bdda1ea4] {
    width: 84% !important;
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
} */
 /* .el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close:nth-child(1) span{
     display: none !important;
} */
.el-tabs__item .el-icon-close:before {
    -webkit-transform: scale(.9);
    transform: scale(.9);
    display: none !important;
}
/* .el-tabs__item.is-closable {
    display: none !important;
} */
#v_Tabs{height: 100%;}
#v_Tabs .el-tabs{height: 100%;}
</style>